使用Compass制作雪碧圖

遇見好的文章，筆者也會轉載。但是正所謂好記性不如爛筆頭，單純的拿來主義也不如自己的親自實踐。所以每次需要轉載的文章，我都會自己敲一遍，中間加入一些自己的思考。
這篇文章轉載自：http://www.hongkiat.com/blog/compass-image-sprite/
作者Thoriq Firdaus
譯者zEx

前端性能優化，一直是前端開發中非常重要的一環，而其中靜態資源特別是圖片的優化，又占據了很大的比重。圖片優化的方法有很多種，其中非常基本而常用的，就是雪碧圖。
CSS雪碧圖就是將幾個圖片拼合成一張圖片，以此來減少HTTP請求的方法，並且可以提升網站的加載性能。除了使用傳統的方法在PS中手動進行拼合之外，還有一些簡便的網站或者工具可以幫我們完成這項工作。
在這里，作者像我們強烈推薦使用Compass的sprite函數，現在就讓我們來看看，這種方法到底好在哪里。

Compass的安裝

要使用Compass，首先要安裝它。在這里多說一句，Compass跟SASS的關系，好比jQuery和JavaScript的關系。SASS是基於Ruby環境的，所以：

• 安裝Ruby。具體方法請自行搜索。

• Ruby環境內有個包管理器——GEM，它類似於Nodejs下的NPM，它隨着Ruby一起被安裝，因此不需要額外安裝。

• 如果國外服務器不給力，也可以把GEM的源換成國內的，比如淘寶：只需執行以下命令：gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/

• 命令行模式下執行gem install compass，SASS和Compass就能自動安裝好了。

注：具體的SASS使用方法請自行搜索。

開始使用Compass

在使用Compass工作之前，我們需要創建一個Compass項目然后監視它。這樣，當這個項目中包含的圖片和scss文件一發生改變，Compass就會自動編譯成合適的形式。

打開命令行終端，輸入以下命令。

compass create /path/to/project
cd /path/to/project
compass watch

合並圖片

我們在images/browsers/文件夾下有一些icon圖片，命名為XXX.png

在Compass添加這些icon，我們可以在.scss文件中使用@import語法指向圖片文件夾下的所有png擴展名的圖片。就像下面這樣：

@import "browers/*.png";

保存文件之后，Compass會將這些圖片進行合並，然后生成一個新的圖片文件，如下：

雪碧圖陳列方向

此外，我們還可以設置雪碧圖排列的方向，正如你剛才看到的圖片截屏，圖片默認是縱向的。假設縱向排列不能滿足要求，我們可以使用$<map>-layout:horizontal;或者$<map>-layout:diagonal;變量來指定他們水平排列或者對角線排列，將變量中的<map>替換成你存儲圖片的文件夾的名字。

• 水平排列例子

$broswers-layout:horizontal;
@import "browsers/*.png";

• 對角線排列例子

$broswers-layout:diagonal;
@import "browsers/*.png";

在樣式表中添加圖片

一旦我們將圖片合並完，我們就可以在樣式表中的背景圖中調用它。我們可以用傳統的做法：

.chrome { background-position: 0 0; width: 128px; height: 128px; }   
.firefox { background-position: 0 -133px; width: 128px; height: 128px; }   
.ie { background-position: 0 -266px; width: 128px; height: 128px; }   
.opera { background-position: 0 -399px; width: 128px; height: 128px; }   
.safari { background-position: 0 -532px; width: 128px; height: 128px; }   

在Compass中，我們有更簡單的辦法，首先，我們用@include all-<map>-sprites這個語法來生成一些CSS規則。

@include all-browsers-sprites 

當上面編譯成正常的css時，除了會生成背景圖的聲明，還有對應的位置，如下所示：

.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari { background: url('/images/browsers-sad8e949931.png') no-repeat; }  
.browsers-chrome { background-position: 0 0; }  
.browsers-firefox { background-position: 0 -128px; }  
.browsers-ie { background-position: 0 -256px; }  
.browsers-opera { background-position: 0 -384px; }  
.browsers-safari { background-position: 0 -512px; }  

或者，我們可以用@include <map>-sprite(image-name)語法將背景圖中的某一個對應的位置圖片傳給指定的選擇器，下面是一個例子：

li{
    @include browsers-sprite(safari); 
}

然后，Compass會聰明的識別出圖片的位置，不用我們明確指出，在正常的css中，上面代碼會轉換成：

.browsers-sprite, li { background: url('/images/browsers-sad8e949931.png') no-repeat; }  
li { background-position: 0 -512px; }  

指定容器的尺寸

最后我們要做的是指定需要顯示背景圖片的容器的寬高屬性。我們傳統的做法是手動查看圖片的寬和高（絕大多數情況是通過查看圖片信息或圖片屬性獲得）。

使用Compass，我們可以使用

&height:browsers-sprite-height(safari);
&width:browsers-sprite-width(safari);
li{
    display:inline-block;
    height: $height;
    width: $width;  
    @include browsers-sprite(safari);  
}

當我們編譯上面這些代碼，他就會轉成下面這些正常的CSS。

.browsers-sprite, li { background: url('/images/browsers-sad8e949931.png') no-repeat; }  
li { display: inline-block; height: 128px; width: 128px; background-position: 0 -512px; } 

結論

通過上面的例子，相信讀者都已經明白了Compass制作雪碧圖的方便之處。實際上，Compass除了這些創建CSS雪碧圖的基本函數，Compass還有很多有用的函數可以使用。

英文出處：http://www.hongkiat.com/blog/compass-image-sprite/

中文譯文：http://www.w3cplus.com/preprocessor/compass-image-sprite.html