Sass 是一個比較嚴謹且提升寫 Css 效率的程式語言，用過 Sass 就回不去 Css 啦！
請服用 - 30天掌握Sass語法 - by 廖洧杰
以下是學習心路歷程：
1. 環境與安裝
2. 增聽 "compass watch coffee" ( coffee 是你新增的專案資料夾)
- cmd //開始搜尋框輸入 "cmd"
- d:
- compass create coffee
- cd coffee
- compass watch coffee
3. 新增網頁框架 index.html
4. 編輯樣式 sass/index.sass
5. images sprites
- $tab-spacing: 5px //圖片合併間隔空間
@import "tab/*.png" //在 images 底下你設定的 png 資料夾所有的 png 圖檔
@include all-tab-sprites //匯入合併圖檔 - images sprites hover & active
If you want to add selectors for your sprites, it's easy todo by adding
_active _target or _hover to the file name. Sprite Tutorial- images path - relative
config.rb - relative_assets = true //把註解打開
注意：當修改 config 設定後，要重新在命令提示字元 watch 資料夾一次，設定才會生效。
6. How to replace a tab with four spaces in sublime text2 ?
http://stackoverflow.com/questions/9575739/how-to-replace-four-spaces-with-a-tab-in-sublime-text-2
Sass 相當嚴謹如果你的空格是一個 tab 就跑不出來啦！空格要用使用空白鍵。
如果你是使用 sublime text 2 來編輯，這個網站教你如何將空格預設為四個空白鍵。
Sass 相當嚴謹如果你的空格是一個 tab 就跑不出來啦！空格要用使用空白鍵。
如果你是使用 sublime text 2 來編輯，這個網站教你如何將空格預設為四個空白鍵。
7. sass structure
- @import mixin //放置所有 Sass 全域變數與 Mixin
- @import reset // reset.css
- @import extnd // 拿來合併樣式，都放 @extend 用的檔案
- @import layout //共同框架
- @import index //首頁
- @import page //內頁
- @import xxx //各單元 Css
- 規劃你的 Sass 結構 http://ithelp.ithome.com.tw/question/10132821
