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

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

Compass的安裝

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

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

• Ruby環(huán)境內(nèi)有個(gè)包管理器——GEM，它類似于Nodejs下的NPM，它隨著Ruby一起被安裝，因此不需要額外安裝。

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

• 命令行模式下執(zhí)行gem install compass，SASS和Compass就能自動(dòng)安裝好了。

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

開始使用Compass

在使用Compass工作之前，我們需要?jiǎng)?chuàng)建一個(gè)Compass項(xiàng)目然后監(jiān)視它。這樣，當(dāng)這個(gè)項(xiàng)目中包含的圖片和scss文件一發(fā)生改變，Compass就會(huì)自動(dòng)編譯成合適的形式。

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

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

合并圖片

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

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

@import "browers/*.png";

保存文件之后，Compass會(huì)將這些圖片進(jìn)行合并，然后生成一個(gè)新的圖片文件，如下：

雪碧圖陳列方向

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

• 水平排列例子

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

• 對角線排列例子

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

在樣式表中添加圖片

一旦我們將圖片合并完，我們就可以在樣式表中的背景圖中調(diào)用它。我們可以用傳統(tǒng)的做法：

.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這個(gè)語法來生成一些CSS規(guī)則。

@include all-browsers-sprites

當(dāng)上面編譯成正常的css時(shí)，除了會(huì)生成背景圖的聲明，還有對應(yīng)的位置，如下所示：

.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)語法將背景圖中的某一個(gè)對應(yīng)的位置圖片傳給指定的選擇器，下面是一個(gè)例子：

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

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

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

指定容器的尺寸

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

使用Compass，我們可以使用-sprite-height(image-name)或者<map>-sprite-width(image-name)函數(shù)來獲得圖片的寬和高。在下面這個(gè)例子，我們會(huì)獲取其中一個(gè)圖片的寬和高，并將值存儲給變量。再使用@include指令獲得分配背景圖。

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

當(dāng)我們編譯上面這些代碼，他就會(huì)轉(zhuǎn)成下面這些正常的CSS。

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

結(jié)論

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

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/lsy26/p/5866327.html

總結(jié)

以上是生活随笔為你收集整理的雪碧图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。