[Css] SASS入門(介紹、設定)
3 min readMar 13, 2017
基礎接觸過HTML及CSS後，每次切版總會花上很多時間再整理CSS，這時使用Sass就可以加速CSS撰寫的速度囉~~~
當你使用CSS時也有以下困擾，請服用Sass可舒緩
- 有時候div class叫做.header時，底下如果有很多子元素，通常都必須一直重複打.header。例：.header h1、.header li a、.header .topbar
- 如果CSS寫越來越多時，時常必須用滑鼠滾輪上下找code，因此而感到煩躁。
- 認為自己一再重複打同樣的code。
- 認為自己開發網頁CSS效率遇到瓶頸，欲尋更好的撰寫效率與工具。
- 有時候CSS結尾或分號沒寫到，導致除錯除了老半天才發現錯誤，降低寫code效率。
- 常聽業界說Sass。
- 有人叫我學Sass。
Sass在做什麼？
編輯Sass檔案，透過編譯後就還是會變成網頁看得懂的CSS檔，
所以並非是在HTML裡面載入Sass檔，仍然還在引入CSS檔案。
Sass及Scss
而不只sass還有scss，兩者則是習慣編寫上的差別。
舉例一般的css碼
- 新增：每次都必須重新打一次.menu後才有辦法繼續寫一個樣式的設定，例如.menu a、.menu li
- 調整：程式碼寫完後，日後要修改/維護/複製時，.menu要改其它名稱就必須逐行去修改，極為不方便。
- 除錯：寫純css時，如果不小心恍神少了個「;」、「｛」、「｝」時，CSS爛掉或沒起效用通常都需要花額外的時間除錯。
而上述這些在寫Sass就可解決
撰寫Sass的下一個class，按Enter下一行推一個Tab。
所以這種Sass的寫法十分的乾淨，但就要很注意換行及Tab，不習慣這麼乾淨的Sass，就可以使用Scss，和css類似，就多了巢狀的寫法，且Scss是支援純Css寫法的。
開始Sass吧！！！
compass create test安裝完ruby、Sass、compass後，就可以透過compass create新的Sass專案，檔案中包含了，sass資料夾（從中編輯scss），stylesheets資料夾（經過Sass編譯後的css檔）及config（記載Sass設定）。
compass watch test記得開啟監控後，才能打Sass時同時修改成css呦~~
要停止監控，使用ctrl+c
設定config.rb
如果你希望sass編譯出來的css不要有註解，那就將# line_comments = false 前面的#號拿掉就不會產生出註解。
裡面會有四行以下的預設設定碼，如果你放CSS的資料夾名稱為CSS，便把stylesheets名稱改為CSS，這樣Sass編譯出來的CSS就會在CSS資料夾，而不會style裡面。
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"修改完config後，記得要重新啟動（watch）才會生效呦！！
Sass的基礎介紹及設定就到此告一段落~~~
下篇將繼續簡介Sass的初階功能囉
GOGO下一篇~~~SASS入門(初階功能)
