A simple guide for newbie to sass/scss.

1. 從基礎開始學起
世界上最成熟、穩定、專業的CSS擴展語言
Presented by KeroYu

2.  SASS 是一種Pre-Processor (預處理器)語言，
提供簡單的方式撰寫CSS
 分為SCSS 和SASS 語法
 擴展名為.scss 和.sass
 SCSS 格式更易維護，以下只教SCSS
 必須先用compiler (編譯器) 轉換成CSS 再
上傳到server 上供瀏覽器渲染

3.  寫法快又簡單
 一目了然的巢狀結構
 維護容易
 最多的開發者使用

4.  安裝一個你喜歡的編譯器(compiler)，讓它
監視打算放.scss 的資料夾
 新建.scss 檔，寫下scss 語法
 存檔，等幾秒鐘讓編譯器運作
 編譯器在正確的路徑裡生成.css 檔
 在html 檔案引入.css 路徑
 大功告成！

5. SCSS  CSS

6. SCSS  CSS

7. SASS 很聰明，導入時不用寫副檔名。
Note: 檔案名前有“_”符號的不會被編譯，當你編輯
_xxx.scss 存檔時，會被編譯的是導入它的檔案。即只有最
終被需要的CSS 會被編譯。

8. 進行大型專案時，你可以把SCSS 分為N 個小片段，並在
檔案名前加“_”，統一導入到all.scss，最後瀏覽器仍然只需
導入all.css 一個檔案。
例如你寫了_components.scss, _layouts.scss, _buttons.scss
按照如下方法導入到all.scss
存檔編譯後，使用all.css 即可，裡面包含了所有導入內容。

9. 所有的屬性都可以儲存在變量中隨時調用。

10. @mixin 把你常用的語法做成容納變數的function 以便重複
利用，用@include 方法填入數值即可
SCSS  CSS

11. @extend 令指定class 繼承某個class 的
所有樣式。
SCSS  CSS

12.  Compass (業界最受歡迎，價值$10 無免費版)
http://compass-style.org/
 Prepros App (免費版有功能限制，完整版$27)
http://alphapixels.com/prepros/
 Koala App (完全免費)
http://koala-app.com/

13.  下載Koala App http://koala-app.com/
 安裝後開啟畫面如下

14.  點擊左上齒輪圖案，語言設為「正體中文」後重啟

24.  無論修改、新增，永遠只更改.scss 檔案，將導出
後的.css 作為成品使用
 再次強調：絕對不要手動更改.css！
 善用Partials 特性，分為多個_xxx.scss 進行中大
規模網站的開發
 將mixins 和variables 放到_mixins.scss、_var.scss
方便各個_xxx.scss 重複引用

25.  使用SASS 就這麼簡單。
Contact me if you have any questions.
KeroYu (cyudev@gmail.com)