寫過CSS的各位都知道,他是透過一行行來編輯,當有很多地方要做修正時就必須花很多時間檢查,解決方案就是使用前置處理器LESS或是SASS。
SASS是什麼?
真的會提升寫網頁的效率?
學習門檻高?
SASS有哪些是CSS無法取代?
如果有以上疑問,我們可以初步來探討一下這兩者的差異性
1.SASS是有結構的CSS,有程式邏輯概念和格式整理的CSS;可以解決當CSS越寫越多時,找CODE的不便。
2.可以有效將CSS模組化的方法,方便日後開發再利用;增加開發效率。
3.當使用共通樣式或者合併class的時候;減少重複打攏長無意義的class名稱或是子元素名稱,且較容易找尋。
4.用CSS3製作特效越來越普及,但太多瀏覽器前綴詞,導致使用上的不便利。
5.可使用繼承方式來進行樣式繼承;多人開發時更容易交接閱讀CSS樣式間的關聯性。
例如:以往的CSS寫法
.nav{ position: relative; } .nav li{ float: left; } .nav .btn{ color: #000; }
SASS寫法
.nav position: relative li float: left .btn color: #000
可以發現到結構階層更清楚明瞭,包含另個class .btn的繼承關係都歸屬到.nav底下,剛開始可能會不習慣沒有大括號和分號的狀態,但用一陣子後便會習慣(反而減少因為漏打產生的錯誤)。
另個案例:CSS最常使用的顏色定義
.box1 { background-color: #222; } .box2 { background-color: #333; } .box3 { background-color: #555; } .box4 { background-color: #777; } .box5 { background-color: #eee; }
SASS使用變數加速開發:
$gray-darker: #222 $gray-dark: #333 $gray: #555 $gray-light: #777 $gray-lighter: #eee .box1 background-color: $gray-darker .box2 background-color: $gray-dark .box3 background-color: $gray .box4 background-color: $gray-light .box5 background-color: $gray-lighter
之後只要使用相同顏色的物件,都可以透過變數指定;假如需要修改也只需修改$宣告的部分即可。
簡單的介紹後有沒有感受到一些方便之處?之後我們再陸續探討,下回見。