SASS 使用參考

1. 準備環境

了解什麼是 SASS, 瀏覽器搜尋:SASS install

在SASS網站右側是使用"命令提示字元“視窗的安裝方法

在SASS網站左側是使用應用軟體工具, 建議可以使用 Koala

在 Windows 系統必須先安裝 Ruby

接著開啟"命令提示字元"視窗, 輸入以下命令安裝 SASS

 

2. 準備網站資料夾及編輯器

準備網站資料夾, 例如: TS_SASS_TEST, 在網站資料夾中再新增 sasscss 二個資料夾

準備網頁設計的編輯器, 例如: Brackets 或 Subline Text

在編輯器中開啟網站資料夾

 

3. 啟動Sass監視與編譯

在 “命令提示字元" 視窗中, 輸入以下命令切換到網站資料夾

輸入以下命令啟動 Sass 的監視與編譯

 

4. 接著在編輯器中進行設計

在 sass 資料夾中, 新增檔案 test001.sass, 觀察 css 資料夾, 會自動新增 test001.css test001.css.map 檔案

在編輯器中分割視窗, 同時開啟 test001.sass 及 test001.css

在 test001.sass 編輯後存檔, test001.css 會自動出現編輯後的結果

可參考: https://changtsuiling.gitbooks.io/sass (尚未校稿更新)