為了加快網頁載入的速度、減少使用者等待的時間，許多前端工程師會將網站需要用到的小圖示合併成一張大圖、再利用CSS來定位各個小圖示，這就是所謂的CSS sprite。CSS sprite可以減少HTTP的請求次數、加快網頁載入的速度。有許多工具都可以幫我們生成CSS sprite，這在篇文章中、我要介紹如何使用Compass自動生成 CSS sprite。

使用Compass製作CSS sprite非常輕鬆、。只要將圖示放在同一個資料夾內、再加上二行的語法，就完成合併圖片的動作囉！

基本用法Basic Spriting

Step1 首先準備好需要的圖示。
在這個範例裡我們準備了4張png 的圖片。每個圖示的尺寸是48×48 pixel。(＊注意：Compass只支援png圖片、其餘圖片格式一律不支援哦。)

Step2 設定專案的圖片資料夾。
開啟專案設定檔config.rb輸入底下語法、將圖片資料夾設成images。

images_dir = "images"

Step3
在images資料夾裡再新增一個icon資料夾，並將所有的圖示檔放進去。底下就是4張圖片的路徑。

Step4
接著我們只要在SCSS檔案裡加上底下二行語法就ok囉

@import "icon/*.png";
@include all-icon-sprites;

在上面的語法中，第二行@include all-icon-sprites;裡的icon就是圖示資料夾的名稱。

接著在相對應的CSS檔裡、我們就可以得到底下的結果：

.icon-sprite, .icon-delete, .icon-edit, .icon-save, .icon-search { background-image: url('/images/icon-s6194bebbcc.png'); background-repeat: no-repeat; }

.icon-delete { background-position: 0 0; }

.icon-edit { background-position: 0 -48px; }

.icon-save { background-position: 0 -96px; }

.icon-search { background-position: 0 -144px; }

在icon資料夾的上層資料夾裡、我們可以看到一張名為icon-s6194bebbcc.png 的sprite圖片。

這個sprite圖片的名稱規則是：資料夾名稱-亂數，只要icon資料夾的圖片有任何更新，sprite圖片就會跟著更新、sprite圖片名稱的亂數值也會跟著改變。而Compass每次都會幫我們載入最新的sprite圖片，您完全不需要操任何的心。

---

巢狀資料夾

如果圖示的資料夾位置修改成images/icons/admin，那麼我們的語法就要改成：

@import "icons/admin/*.png";
@include all-admin-sprites;

第二行@include all-admin-sprites;中，admin就是圖示資料夾的名稱。

**圖片如果存放在巢狀資料夾中、會以底層資料夾作為sprite的名稱。

---

自訂CSS類別名稱

預設情況下、Compass所產生出來的CSS樣式名稱規則是：資料夾名稱-圖片名稱。我們也可以進一步自訂CSS樣式名稱。

@import "icon/*.png";
.actions {
  .remove  { @include icon-sprite(delete); }
  .pen    { @include icon-sprite(edit);   }
  .save    { @include icon-sprite(save);   }
  .search  { @include icon-sprite(search); }
}

得到的CSS如下

.icon-sprite, .actions .remove, .actions .pen, .actions .save, .actions .search { background-image: url('/images/icon-s6194bebbcc.png'); background-repeat: no-repeat; }

.actions .remove { background-position: 0 0; }
.actions .pen { background-position: 0 -48px; }
.actions .save { background-position: 0 -96px; }
.actions .search { background-position: 0 -144px; }

 

---

自動產生:hover、:active、:focus等選擇器

如果我們希望在滑鼠滑入時載入不同的圖片，可以使用Compass幫我們自動生成:hover、:active、:focus等狀態選擇器。這是一個非常好用的功能，在準備圖示的時候、同時準備不同狀態的圖片、並且注意圖片的命名。圖片的命名規則是：CSS類別名稱-狀態。

現在我們再開一個admin資料夾備用，接著準備四張圖片，分別是：edit.png、edit-active.png、edit-focus.png、edit-hover.png，將這四張圖片放進剛剛開好的admin資料夾中。(**圖片的命名方式也可以使用_(下底線)連接樣式名稱及狀態，如：edit_active.png )

接著設定Sass

@import "admin/*.png";
@include all-admin-sprites;

生成的CSS就會變成：

.admin-sprite, .admin-edit { background-image: url('/images/icon/admin-sb3bdde07da.png'); background-repeat: no-repeat; }

.admin-edit { background-position: 0 -144px; }
.admin-edit:hover, .admin-edit.edit-hover { background-position: 0 -96px; }
.admin-edit:active, .admin-edit.edit-active { background-position: 0 0; }
.admin-edit:focus, .admin-edit.edit-focus { background-position: 0 -48px; }

---

加上寬度及高度的設定

現在我們要使用<map>-sprite-height及<map>-sprite-width來幫sprite加上寬度及高度的設定：

@import "icon/*.png";
.actions {
  .remove  { 
    @include icon-sprite(delete);
    width: icon-sprite-height(delete); 
    height: icon-sprite-width(delete);
  }
  .pen     { @include icon-sprite(edit);   }
  .save    { @include icon-sprite(save);   }
  .search  { @include icon-sprite(search); }
}

得到結果如下：

.icon-sprite, .actions .remove, .actions .pen, .actions .save, .actions .search { background-image: url('/images/icon-s6194bebbcc.png'); background-repeat: no-repeat; }

.actions .remove { background-position: 0 0; width: 48px; height: 48px; }
.actions .pen { background-position: 0 -48px; }
.actions .save { background-position: 0 -96px; }
.actions .search { background-position: 0 -144px; }

上面的例子是幫每個圖示個別設定寬度及高度。如果要幫全部的圖示都加上寬度及高度的設定，則必須使用$<map>-sprite-dimensions

$icon-sprite-dimensions:true;
@import "icon/*.png";
@include all-icon-sprites;

得到的CSS如下：

.icon-sprite, .icon-delete, .icon-edit, .icon-save, .icon-search { background-image: url('/images/icon-s6194bebbcc.png'); background-repeat: no-repeat; }

.icon-delete { background-position: 0 0; height: 48px; width: 48px; }

.icon-edit { background-position: 0 -48px; height: 48px; width: 48px; }

.icon-save { background-position: 0 -96px; height: 48px; width: 48px; }

.icon-search { background-position: 0 -144px; height: 48px; width: 48px; }

---

Compass CSS sprite 的實用功能

Compass提供了幾個方法，讓我們容易掌握產生出來的CSS sprite，除了前面提到的$<map>-sprite-dimensions之外，常見的還有：

$<map>-spacing：定義產生出來的CSS sprite大圖上，每個小圖示之間的距離，預設值是0，單位是px。

$<map>-layout：定義產生出來的CSS sprite大圖上，每個小圖示的排列方式：共有horizontal、vertical、diagonal、smart四種。

以上這些的設定的方法都必須寫在 @import "<map>/*.png"之前才會有作用哦。

---

$<map>-spacing 設定小圖示之間的間距

$icon-spacing: 20px;
@import "icon/*.png";
@include all-icon-sprites;

上面sass設定所產生出來的sprite圖片，各個小圖之間的間距為20px。

---

$<map>-layout 設定小圖示的排列方式

$<map>-layout: smart; 只有在圖示大小不統一時才能看出效果。若是圖示大小一致的話，產生出來的sprite 大圖與$<map>-layout: vertical; 的結果相同。

另外當使用 $<map>-layout: smart; 時，$<map>-spacing的設定就會變成無效。因為 $<map>-layout: smart;會將小圖之間的空白去除。

以上是我們在設定CSS Sprite時常用的方法，如果您需要進一步的資料，可以參考Compass官網中的相關資料。