使用compass自動合併css雪碧圖(css sprite)

css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術。使用css雪碧圖，可以減小頁面的請求數、下降圖片佔用的字節，以此來達到提高頁面訪問速度的目的。可是它也有使人詬病的地方，就是拼圖和後期維護的成本比較大。也正是由於這一點，致使不少開發者懶於使用css雪碧圖。

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

安裝compass

首先請確認電腦已經安裝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項目

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

$ 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文件。

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

$<map>-<property>: setting;                // 配置全部sprite
$<map>-<sprite>-<property>: setting;    // 配置單個sprite

說明：

• <map>: 對應圖標存放的文件夾名稱，如上面例子中的：share和magic
• <sprite>: 對應單個圖標的名稱，如上面例子中的: weibo, qq, github等

配置sprite間距

$<map>-spacing: 5px;                // 配置全部sprite間距爲5px，默認爲0px
$<map>-<sprite>-spacing: 10px;        // 配置單個sprite間距爲10px，默認繼承$<map>-spacing的值

配置sprite重複性

$<map>-repeat: no-repeat/repeat-x;        // 配置全部sprite的重複性，默認爲no-repeat
$<map>-<sprite>-repeat: no-repeat/repeat-x;// 配置單個sprite的重複性，默認繼承$<map>-repeat的值

配置sprite的位置

$<map>-position: 0px;                // 配置全部sprite的位置，默認爲0px
$<map>-<sprite>-position: 0px;        // 配置單個sprite的位置，默認繼承$<map>-position的值

配置sprite的佈局方式

$<map>-layout: vertical/horizontal/diagonal/smart;        // 默認佈局方式爲vertical

清除過時的sprite

$<map>-clean-up: true/false;        // 默認值爲true

每當添加、刪除或改變圖片後，都會生成新的sprite，默認狀況下compass會自動的移除舊的sprite，固然也能夠經過配置$<map>-clean-up: false;來保留舊的sprite。

配置sprite的基礎類

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

$<map>-sprite-base-class: ".class-name";

魔術精靈選擇器開關

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

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

設置sprite尺寸

咱們在合併雪碧圖時，不少時候圖片的尺寸都不同，那麼在使用時咱們如何給每一個sprite設置尺寸呢？compass有提供自動設置每一個sprite尺寸的配置，默認是關閉的，咱們只需手動啓用便可。

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

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

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

固然，若是隻對某個sprite單獨設置的話，compass也提供了這個功能。語法以下:

$<map>-sprite-width($name);     // $name爲合併前的圖片名稱
$<map>-sprite-height($name);

例如：

.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/