摘要：使用雪碧圖，能夠減少頁面的請求數降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。也正是因為這一點，導致很多開發者懶于使用雪碧圖。本文就介紹下怎樣使用來自動合并雪碧圖。生成的每個雪碧圖默認的規則是目錄名圖片名。

css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術。使用css雪碧圖，能夠減少頁面的請求數、降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。但是它也有令人詬病的地方，就是拼圖和后期維護的成本比較大。也正是因為這一點，導致很多開發者懶于使用css雪碧圖。

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

首先請確認電腦已經安裝ruby及sass環境，ruby及sass的安裝過程可參考：

  
sass入門指南

安裝完成后可通過以下指令確認：

$ 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: 本文中代碼運行環境為：sass: 3.4.6, compass: 1.0.1, 測試時請確認sass版本不低于3.4.6，compass版本不低于1.0.1。

進入項目目錄，命令行中運行：

$ compass init

會生成相應的目錄和配置文件。在images目錄下建立share目錄存放需合并的圖標。項目目錄結構如下：

- 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    // 關閉行注釋

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

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

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

命令行調用compass compile進行編譯，此時會發現images目錄下出現了一個合并后的圖片share-xxxxxxxx.png, stylesheet目錄下生成了對應的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;
}

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

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

@import "compass/utilities/sprites";    // 加載compass sprites模塊
@import "share/*.png";                    // 導入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;
}

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

weibo.png            // 默認狀態圖標
weibo_hover.png     // hover狀態圖標
weibo_active.png     // active狀態圖標

在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;
}

我們已經利用compass實現了簡單雪碧圖的合成。當然compass還提供了很多可供配置的選項，下面來一一介紹。

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

先來看下配置相關的語法：

$

說明：

: 對應圖標存放的文件夾名稱，如上面例子中的：share和magic

: 對應單個圖標的名稱，如上面例子中的: weibo, qq, github等

$

$

$

$

$

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

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

$

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

$disabled-magic-sprite-selectors: false;    // 默認為true

我們在合并雪碧圖時，很多時候圖片的尺寸都不一樣，那么在使用時我們如何給每個sprite設置尺寸呢？compass有提供自動設置每個sprite尺寸的配置，默認是關閉的，我們只需手動啟用即可。

$setting-sprite-dimensions: true;    // 啟用自動設置sprite尺寸，默認值為false

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

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

當然，如果只對某個sprite多帶帶設置的話，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/