讓DodoMonster來教你如何使用compass自動合併生成css雪碧圖(css sprite)

工具(若是已安裝好ruby、sass和compass可忽略)

• ruby

安裝下載地址：請點擊此處下載

記得勾上那兩個勾，把ruby添加到系統變量

• sass
  打開命令行 -> 輸入命令gem install sass -> 回車 -> 耐心等待

• compass
  打開命令行 -> 輸入命令gem install compass -> 回車 -> 耐心等待

• 檢驗以上三者是否安裝成功，命令行下輸入：

  1. ruby -v

  2. sass -v

  3. compass -v

本文中代碼運行環境爲：ruby:2.3.3, sass: 3.4.22, compass: 1.0.3, 測試時請確認sass版本不低於3.4.6，compass版本不低於1.0.1。

配置初始化compass

• 建目錄(test-compass) -> 進入目錄 -> 輸入命令 compass init -> 自動生成初始配置目錄和文件

注意不能從根目錄開始目錄名不能有中文，不然ruby編譯會報Encoding::CompatibilityError on line ["87"] of D: incompatible character encodings: GBK and UTF-8 的cuo'wu

• config.rb 文件中添加下面這兩行
  relative_assets = true #使用相對目錄
line_comments = false #關閉行註釋

• 在test-compass目錄下新建images(這個目錄名必須固定)目錄，內含test、magic、settiing三個文件夾，總目錄結構如圖：

compass sprite配置

1. 相關語法

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

• <map>: 對應圖標存放的文件夾名稱，如上面例子中的：test和magic

• <sprite>: 對應單個圖標的名稱，如上面例子中的: chuyunhu, chuyunhu_active等

1. 配置sprite間距

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

1. 配置sprite重複性

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

1. 配置sprite的位置

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

1. 配置sprite的佈局方式

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

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

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

2. 魔術精靈選擇器開關
   默認狀況下compass是關閉這個功能的，也就是說compass默認不會將以_hover, _active等名字結尾的圖片自動輸出對應的:hover, :active等僞類樣式。固然若是想這樣的話，也能夠禁用它：

   $disable-magic-sprite-selectors: true;

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

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

   這時輸出的樣式中會自動加上圖片的尺寸。
   固然，若是隻對某個sprite單獨設置的話，compass也提供了這個功能。語法以下:

   $<map>-sprite-width($name);     // $name爲合併前的圖片名稱
   $<map>-sprite-height($name);
   
   如：
   
   .test-special {
       @include setting-sprite(compass);
       width: setting-sprite-width(compass);
       height: setting-sprite-height(compass);
   }

開始合併雪碧圖

輸出全部雪碧圖

• 在sass目錄下新建test.scss(名字可隨意起，可是必須與下面代碼中的all-test-sprites中的test對應)文件,並輸入如下代碼：

@charset "utf-8";     
/*sass文件編譯時若是文件內含中文哪怕是註釋都必須添加這一行不然會報invalid gbk character "\xE5"的錯誤*/
@import "compass/utilities/sprites";    /* 加載compass sprites模塊*/
@import "test/*.png";                    /* 導入test目錄下全部png圖片*/
@include all-**test**-sprites;                /* 輸出全部的雪碧圖css*/

• 在test-compass目錄下運行compass compile 進行編譯後,images目錄下會生成test-*.png目錄下，這樣雪碧圖就生成了，而stylesheets目錄下則生成了test.css裏面有對應的圖片位置background-position，就不再須要用ps一個個計算位置，而後拼接在一塊兒。棒棒噠！！！

調用單個雪碧圖

• 在sass目錄下新建test-single.scss，寫入如下代碼：

@charset "utf-8";  
@import "compass/utilities/sprites";    // 加載compass sprites模塊
@import "test/*.png";                    // 導入share目錄下全部png圖片
.chuyunhu {
    @include test-sprites(chuyunhu);//chuyunhu爲圖片名
}

• 在test-compass目錄下運行 compass compile 進行編譯，注意：使用 compass compile 只編譯發生變更的文件，若是你要從新編譯未變更的文件，須要使用--force參數 compass compile --force

• 編譯後的css以下：

@charset "UTF-8";
/* 加載compass sprites模塊*/
.test-sprite, .chuyunhu .test-chuyunhu {
  background-image: url('../images/test-sb9515b4960.png');
  background-repeat: no-repeat;
}

/* 導入test目錄下全部png圖片*/
.chuyunhu .test-chuyunhu {
  background-position: 0 0;
}
.chuyunhu .test-chuyunhu:active, .chuyunhu .test-chuyunhu.chuyunhu-active {
  background-position: 0 -64px;
}

利用魔術精靈選擇器智能輸出

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

chuyunhu.png

chuyunhu_active.png

chuyunhu_hover.png

• 在sass目錄下新建magic.scss，寫入如下代碼：

@import "compass/utilities/sprites";
@import "magic/*.png"; //導入magic目錄下的全部png圖片
@include all-magic-sprites; //magic與scss文件名對應

• 在test-compass目錄下運行 compass compile --force 進行編譯便可

簡單的github示例代碼：https://github.com/DodoMonste...

鳴謝

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