用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/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:
