使用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