利用compass生成sprites圖檔

用PS做一張sprites圖檔是一件很費工的事情。

compass可以幫我們輕鬆快速的解決這些問題唷～

首先我們先在.scss文件上方引入

@import "compass/utilities/sprites";

接著引入圖片路徑

@import "../images/my-icons/*.png";

資料範例路徑如下圖：

接著compass之後會在資料目錄底下出現一張sprites圖檔，如下圖：

現在我們sprites圖生成之後要如何使用呢？？

接著在你要引入的class中輸入以下代碼

//此範例圖檔名稱為1.png
 width: my-icons-sprite-width(1);//前面my-icons=文檔名稱，接著帶入sprite-width(1)<=（）中帶入你的圖片名稱，此串會直接抓取當前圖檔的寬度
 height: my-icons-sprite-height(1);//前面my-icons=文檔名稱，接著帶入sprite-height(1)<=（）中帶入你的圖片名稱，此串會直接抓取當前圖檔的高度
 @include my-icons-sprite(1);//前面my-icons=文檔名稱，接著帶入sprite(1)<=（）中帶入你的圖片名稱

接著在解析出來的css中會看到剛剛compass出來的sprite圖跟座標。

.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }