2016年3月10日 星期四

[筆記] 使用Compass Sprite x 自動合併圖片 x 自動產生background-position

1.開啟「命令提示字元」,建立compress專案


2.開啟compress設定檔,檢查設定

3.根據設定建立對應的images及icons資料夾

4.再資料夾中放入要合併的素材圖片
5.建立一個新的scss檔

6.在scss檔中寫入內容,完成後記得儲存檔案

7.儲存檔案後,在「命令提示字元」輸入指令compile 本範例輸入"compass compile test1"

8.完成後會自動在剛剛config.rb設定的相對路徑中generate相對應的css檔,預設是stylesheets資料夾

9.這個時候開啟sprite.css及images資料夾可以看到已經自動generate了css及合併後的圖檔