CSS精靈 - 我可以在CSS中做簡單的數學運算嗎？

我正在使用一個包含我所有圖標的圖標表，現在在我的CSS中引用它們。CSS精靈 - 我可以在CSS中做簡單的數學運算嗎？

每個圖標是32×32，並且在這樣的網格：

AA BB CC DD ......

A1 B1 C1 D1 ......

A2 B2 C2 D2 .......

UU XX YY ZZ ......

等

其中AA =圖標，A1 =懸停，A2 =有效。

它工作正常，在CSS現在它是這樣的：

.icon {

高度：32PX;

width：32px;

background-image：url（'/ img/slbuttons.png'）;

}

.AAicon {背景位置：0像素0像素;}

.BBicon {背景位置：-32px 0像素;}

.CCicon {背景位置：-64px 0像素;}

等等

尋找是林莫名其妙地使它升技更簡單，圖標犯規ç （32 * 32），所以不是手動寫每個不同的圖標，我只是想引用前者。：

AAIcon = X0，Y0，BBIcon = X1，Y0，CCIcon = X2，Y0 A1Icon = X0，Y1，等等等等

代替我不得不坐在和寫入每個32,64， 96,128等我自己 - 沒有可能做一個（xpos = gridcount * 32，ypos = gridcount * 32）？

爲什麼我要這個的原因是我只是改變了我的圖標包大小，然後我必須重寫所有這些值，每個塊圖標/懸停/活動實際上是相同的除了座標，將是一個大幫助如果我可以有一個全局變量來定義大小，然後這些會自動用來調整後面的定位。

不知道我是否可以在CSS中，也許多數民衆贊成CSS3或？

在CSS或WEB開發中，我不是一個專家，所以它可能很容易。

來源

2013-08-04 thorios

在純粹的CSS中，不，你不能做數學。這完全是一種造型語言。有關動態樣式化頁面的選項有幾個。

您可以使用SASS和LESS（它們是自己的語言）運行處理器（SASS使用Ruby，LESS使用JavaScript）來生成樣式表。

第二個選擇是使用JavaScript，對於初學者來說，jQuery可能是最簡單的選擇。一旦您使用類似<script src="js/jquery.js"></script>（或者Google CDN）的方式包含了jQuery源代碼，您就可以自由地使用除標準JavaScript之外的jQuery庫。

一小片段來獲得圖像的高度：

<script> 
var imgHeight = $('.icon').height(); //remove the height and width from your CSS first! 
var imgWidth = $('.icon').width(); 
</script>

然後，您可以使用jQuery來操縱CSS動態基於背景圖像的高度：

<script> 
var iconA = $('.AAIcon'); 
iconA.css('background-position','imgHeight'); 
</script>

jQuery

來源

2013-08-04 12:47:12 mikedugan

是的，你可以！通過使用一個CSS預處理器，你可以做數學，變量等等。兩種流行的是SASS和LESS。 SASS正在獲得大量的牽引力，並且是我使用的。這是一個很好的概要。

http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/

使用CSS預處理器，你可以做的正是你在說什麼。祝你好運！並享受更輕鬆的CSS！

來源

2013-08-04 05:50:45 jons

CSS精靈 - 我可以在CSS中做簡單的數學運算嗎？

回答

相關問題