用SASS開發網頁(一){由CSS轉換到SASS}

寫過CSS的各位都知道,他是透過一行行來編輯,當有很多地方要做修正時就必須花很多時間檢查,解決方案就是使用前置處理器LESS或是SASS。

SASS是什麼?
真的會提升寫網頁的效率?
學習門檻高?
SASS有哪些是CSS無法取代?
如果有以上疑問,我們可以初步來探討一下這兩者的差異性

1.SASS是有結構的CSS,有程式邏輯概念和格式整理的CSS;可以解決當CSS越寫越多時,找CODE的不便。

2.可以有效將CSS模組化的方法,方便日後開發再利用;增加開發效率。

3.當使用共通樣式或者合併class的時候;減少重複打攏長無意義的class名稱或是子元素名稱,且較容易找尋。

4.用CSS3製作特效越來越普及,但太多瀏覽器前綴詞,導致使用上的不便利。

5.可使用繼承方式來進行樣式繼承;多人開發時更容易交接閱讀CSS樣式間的關聯性。

例如:以往的CSS寫法

SASS寫法

可以發現到結構階層更清楚明瞭,包含另個class .btn的繼承關係都歸屬到.nav底下,剛開始可能會不習慣沒有大括號和分號的狀態,但用一陣子後便會習慣(反而減少因為漏打產生的錯誤)。

另個案例:CSS最常使用的顏色定義

SASS使用變數加速開發:

之後只要使用相同顏色的物件,都可以透過變數指定;假如需要修改也只需修改$宣告的部分即可。
簡單的介紹後有沒有感受到一些方便之處?之後我們再陸續探討,下回見。

Leave a Reply