在早期網頁設計師要做CSS Sprite的時候，
除了自己手做土法煉鋼以外，
同時也會使用線上網站工具來解決這個問題，

剛好翻到六年前我自己在photoshop合併過的一張圖片...=_=||

說實在在早期做這種東西在那個時候真的很費時，
而且還必須做到px分毫不差，
否則就會看到其他spite的圖片。
雖然網路上也不少線上圖片合併服務，
但有時候要微調的時候還是很不方便。
所以這裡就來介紹我自己在用Compass CSS Sprite的常用功能。

首先你必須先到你的圖片資料夾(images)，
開設一個資料夾放你要合併的圖片(images/icon)，
再把圖片放進去，請注意合併的圖片必須都是png，
Compass並不支援jpg與gif哦。

設定完成後，Sass檔案就打：

       //資料夾名稱/底下所有的png
@import "icon/*.png"
@include all-icon-sprites

儲存候你就會發現images資料會出現合併過後的圖片了。

如果你不希望每張圖片那麼密，
以避免在使用時會不小心顯示出其他圖片樣式，
那就可以用$sprite資料夾-spacing:20px來修正，
程式碼就變成：

//資料夾名稱-spacing:20px
$icon-spacing: 20px
@import "icon/*.png"
@include all-icon-sprites

圖片就會上下有間距20px：

如果你希望合併的圖片是水平呈現，
那程式碼就打成：

//資料夾名稱
$icon-layout: horizontal 
@import "icon/*.png"
@include all-icon-sprites

圖片就會變成水平合併：

再來合併出來的CSS碼就會顯示成這個樣子，
class就會依序生成→ .[資料夾名稱]-[原圖片名稱]：

.icon-sprite, .icon-download, .icon-fb, .icon-mail, .icon-plurk {
  background: url('/images/icon-se60cf2ca5f.png') no-repeat;
}
.icon-download {
  background-position: 0 -68px;
}
.icon-fb {
  background-position: 0 -120px;
}
.icon-mail {
  background-position: 0 0;
}
.icon-plurk {
  background-position: 0 -188px;
}

這樣一來，
在管理上就方便多了，
當你有其他圖片要引入時，
就把他丟到對應資料夾，
Compass就會自動幫你對應class名稱與位置。

影片內容除了預設流程外，
同時也錄製了一些實際載入在div與i的tag上的background用法，
提供各位參考與學習^_^：

圖檔來源：https://www.iconfinder.com