[Css] SASS入門(介紹、設定)
基礎接觸過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入門(初階功能)