摘要：使用雪碧圖，能夠減少頁面的請求數(shù)降低圖片占用的字節(jié)，以此來達(dá)到提升頁面訪問速度的目的。也正是因?yàn)檫@一點(diǎn)，導(dǎo)致很多開發(fā)者懶于使用雪碧圖。本文就介紹下怎樣使用來自動合并雪碧圖。生成的每個雪碧圖默認(rèn)的規(guī)則是目錄名圖片名。

css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術(shù)。使用css雪碧圖，能夠減少頁面的請求數(shù)、降低圖片占用的字節(jié)，以此來達(dá)到提升頁面訪問速度的目的。但是它也有令人詬病的地方，就是拼圖和后期維護(hù)的成本比較大。也正是因?yàn)檫@一點(diǎn)，導(dǎo)致很多開發(fā)者懶于使用css雪碧圖。

對于這種耗時、枯燥、重復(fù)性的工作，最好的解決方法還是交給工具去處理。本文就介紹下怎樣使用compass來自動合并css雪碧圖。

首先請確認(rèn)電腦已經(jīng)安裝ruby及sass環(huán)境，ruby及sass的安裝過程可參考：

  
sass入門指南

安裝完成后可通過以下指令確認(rèn)：

$ ruby -v
ruby 2.0.0p451 (2014-02-24) [x64-mingw32]
$ sass -v
Sass 3.4.6 (Selective Steve)

接著安裝compass:

$ gem install compass

// 查看compass版本
$ compass -v
Compass 1.0.1 (Polaris)

ps: 本文中代碼運(yùn)行環(huán)境為：sass: 3.4.6, compass: 1.0.1, 測試時請確認(rèn)sass版本不低于3.4.6，compass版本不低于1.0.1。

進(jìn)入項(xiàng)目目錄，命令行中運(yùn)行：

$ compass init

會生成相應(yīng)的目錄和配置文件。在images目錄下建立share目錄存放需合并的圖標(biāo)。項(xiàng)目目錄結(jié)構(gòu)如下：

- sass
- stylesheet
- images
  |-- share
  |-- magic
  |-- setting

config.rb文件配置如下：

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

relative_assets = true    // 使用相對目錄
line_comments = false    // 關(guān)閉行注釋

完整的項(xiàng)目目錄示例可在github上查看：https://github.com/Bubblings/compass-sprite

在sass目錄下新建share.scss文件，并寫入以下代碼：

@import "compass/utilities/sprites";    // 加載compass sprites模塊
@import "share/*.png";                    // 導(dǎo)入share目錄下所有png圖片
@include all-share-sprites;                // 輸出所有的雪碧圖css

命令行調(diào)用compass compile進(jìn)行編譯，此時會發(fā)現(xiàn)images目錄下出現(xiàn)了一個合并后的圖片share-xxxxxxxx.png, stylesheet目錄下生成了對應(yīng)的share.css文件：

.share-sprite, .share-github, .share-qq, .share-weibo {
  background-image: url("../images/share-s7fefca4b98.png");
  background-repeat: no-repeat;
}

.share-github {
  background-position: 0 0;
}

.share-qq {
  background-position: 0 -23px;
}

.share-weibo {
  background-position: 0 -47px;
}

至此，我們就實(shí)現(xiàn)了一個簡單的雪碧圖合并，而且只用了三行代碼。是不是有點(diǎn)小激動^_^。
生成的代碼中.share-sprite是雪碧圖的基礎(chǔ)類，后面介紹配置時會詳細(xì)說明。生成的每個雪碧圖默認(rèn)的class規(guī)則是：.目錄名-圖片名。如果想自定義，我們可以通過下面調(diào)用單個雪碧圖的方式來實(shí)現(xiàn)。

在sass目錄下新建single-share.scss文件，并寫入以下代碼：

@import "compass/utilities/sprites";    // 加載compass sprites模塊
@import "share/*.png";                    // 導(dǎo)入share目錄下所有png圖片
.test {
    @include share-sprites(github);
}

編譯后的css為：

.share-sprite, .test {
  background-image: url("../images/share-s7fefca4b98.png");
  background-repeat: no-repeat;
}

.test {
  background-position: 0 -23px;
}

有的時候我們的圖標(biāo)會有多種狀態(tài)，比如hover, active, focus, target等。利用compass的魔術(shù)精靈選擇器我們就可以智能的合并各狀態(tài)的圖標(biāo)，并輸出對應(yīng)的css。使用時，我們需要將圖標(biāo)按照一定的規(guī)則命名。例如：

weibo.png            // 默認(rèn)狀態(tài)圖標(biāo)
weibo_hover.png     // hover狀態(tài)圖標(biāo)
weibo_active.png     // active狀態(tài)圖標(biāo)

在sass目錄下新建magic.scss文件，并寫入以下代碼：

@import "compass/utilities/sprites";
@import "magic/*.png";
@include all-magic-sprites;

編譯后的css為：

.magic-sprite, .magic-weibo {
  background-image: url("../images/magic-s758f6928e8.png");
  background-repeat: no-repeat;
}

.magic-weibo {
  background-position: 0 0;
}
.magic-weibo:hover, .magic-weibo.weibo-hover {
  background-position: 0 -48px;
}
.magic-weibo:active, .magic-weibo.weibo-active {
  background-position: 0 -24px;
}

我們已經(jīng)利用compass實(shí)現(xiàn)了簡單雪碧圖的合成。當(dāng)然compass還提供了很多可供配置的選項(xiàng)，下面來一一介紹。

PS: 以下的配置選項(xiàng)不再多帶帶舉例，可參考示例項(xiàng)目中的setting.scss文件。

先來看下配置相關(guān)的語法：

$

說明：

: 對應(yīng)圖標(biāo)存放的文件夾名稱，如上面例子中的：share和magic

: 對應(yīng)單個圖標(biāo)的名稱，如上面例子中的: weibo, qq, github等

$

$

$

$

$

每當(dāng)添加、刪除或改變圖片后，都會生成新的sprite，默認(rèn)情況下compass會自動的移除舊的sprite，當(dāng)然也可以通過配置$來保留舊的sprite。

在使用sprite時，compass會自動的生成一個基礎(chǔ)類來應(yīng)用公用的樣式(如background-image)，默認(rèn)的類名為$，上面例子中的.share-sprite, .magic-sprite就是這個基礎(chǔ)類，當(dāng)然compass也提供了自定義這個類名的選項(xiàng)：

$

上面已經(jīng)介紹了怎樣利用利用魔術(shù)精靈選擇器智能輸出sprite，默認(rèn)情況下compass是開啟這個功能的，也就是說compass默認(rèn)會將以_hover, _active等名字結(jié)尾的圖片自動輸出對應(yīng)的:hover, :active等偽類樣式。當(dāng)然如果不想這樣的話，也可以禁用它。

$disabled-magic-sprite-selectors: false;    // 默認(rèn)為true

我們在合并雪碧圖時，很多時候圖片的尺寸都不一樣，那么在使用時我們?nèi)绾谓o每個sprite設(shè)置尺寸呢？compass有提供自動設(shè)置每個sprite尺寸的配置，默認(rèn)是關(guān)閉的，我們只需手動啟用即可。

$setting-sprite-dimensions: true;    // 啟用自動設(shè)置sprite尺寸，默認(rèn)值為false

這時輸出的樣式中會自動加上圖片的尺寸，例如：

.setting-compass {
  background-position: -5px 0;
  height: 35px;
  width: 200px;
}

當(dāng)然，如果只對某個sprite多帶帶設(shè)置的話，compass也提供了這個功能。語法如下:

$

例如：

.special {
    @include setting-sprite(compass);
    width: setting-sprite-width(compass);
    height: setting-sprite-height(compass);
}

則輸出的css為:

.special {
  background-position: -5px 0;
  width: 200px;
  height: 35px;
}      

github上放了一個簡單的示例可供參考：

  
compass合并雪碧圖示例代碼

原文地址：http://riny.net/2014/compass-sprite/