簡介
為 CSS 預處理器(CSS Preprocessor),透過將程式模組化的概念,新增了變數、巢狀結構、混入、繼承等寫法,作為 CSS 語法的擴充,用以改善程式碼的結構與可維護性。有助於更好地組織管理樣式,以及更高效地開發專案。
優點
- 減少CSS 重複的代碼,節省開發時間。
- 完全兼容所有版本的CSS,並擴展了CSS3,增加了規則、變量、混入、選擇器、繼承、內置函數等等特性。
- 能生成良好格式化的CSS 代碼,可讀性高,易於組織和維護。
Sass/SCSS 寫法
Sass
- 縮排語法,副檔名 .sass
- 使用縮排方式編輯巢狀關係
Sass語法 | |
---|---|
- 無括號與結尾分號,僅使用縮排方式
SCSS
- 塊語法,副檔名 .scss
- 使用大括號區分選擇器,使用分號區分屬性,較貼近原生 CSS
- 較多人使用
SCSS語法 | |
---|---|
常用語法
-
變數 Variables
以錢字號
$
來宣告變數,通常會寫在程式碼最上方,只要有引用該變數的地方,均可統一修改管理,常用於:按鈕顏色、字型字體大小等。
-
混合 Mixins
將經常被重複使用的程式碼獨立撰寫,以
@mixin
語法包裝起來,需要時透過@include
引用,即可根據不同參數來設定相似的樣式。亦可再結合@content
,達到更有彈性的優點。實例: 運用於RWD斷點設定。
-
繼承 Extend
使用
@extend
繼承樣式,減少重覆撰寫。有下列兩種寫法(是否含有占位符(%))。
區別在於 : 【使用%宣告】將不會產生實體的對象,例如標籤、class等。
假設今天html裡沒有 .text-style 的class那麼就不必產生一個無意義的 .text-style,
改用%的方式宣告可以減少不必要的css。
比較:@mixin 和 @extend 使用時機
- @mixin 是將屬性及值同時放入有載入該樣式的目標對象裡,雖能減少重複撰寫樣式的時間,卻也可能造成編譯後的 CSS 樣式大量重複,使檔案異常肥大。
- @extend 同樣能解決重用問題,搭配佔位符,將目標對象進行合併再一起指向共同的樣式。
@mixin 和 @extend 兩者的使用時機與差異,可從下列兩點來思考。 若不需傳遞參數而又不希望CSS太大時,建議使用 @extend
- 是否需傳遞參數
- 是否需考慮編譯後 CSS 大小
模組化管理
依專案所需規劃,可將不同功能的樣式拆分成不同支SCSS檔,並建立一支專門引用SCSS的管理頁,以便清楚知道專案有引用那些SCSS,也利於後續管理。
甚至可進一步將常用的內容拉出,讓結構與樣式分離、內容與容器分離,提高使用上的可複用性與擴展性,此種概念即為 OOCSS,盡可能讓元件不要被限制在特定的容器下。
-
建立all.scss
用於管理所有SCSS分支檔
Bootstrap 即是使用SCSS來開發與管理樣式,可透過修改Bootstrap的SCSS內檔案,來客製化屬於自己的樣式,讓切版更快速與彈性。
常見問題與觀念
- 程式碼須先 編譯(compiled) 成 CSS 的形式,才能讓瀏覽器解讀並呈現出畫面。使用vscode時,可安裝插件來Live Sass Compiler 來進行編譯。
- 多利用 巢狀寫法(Nesting)
- 巢狀不要超過 四層,以免影響效能
- 編譯過程中,是 從上到下來執行,所以需注意變數的順序