用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)
接著在解析出來的css中會看到剛剛compass出來的sprite圖跟座標。
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/m