預處理器與後處理器

廣義的預處理器

預處理器（ Preprocessors) ，可以理解是 “處理” 這個行為發生在前面。那我們將範圍限縮至 css 上，預處理器又是如何運作呢？

css 預處理器特色與運作

常見的 css 預處理包含 Sass, Less, Stylus 等，在此以 Sass 為例， 它提供多元的樣式撰寫：

1. 撰寫變數 (variable)
2. 撰寫條件判斷(condition)
3. 模組化樣式( @mixin, extend )
4. 以巢狀架構(nesting)撰寫、管理樣式

提示

原生 css 也有巢狀語法了，詳情可看 css nesting

假設今天我們撰寫一個簡單的 $variable，並實際拿來使用

$font-md:16px

/* 接著使用這個 mixin */
.button {
  font-size:$font-md
}

照理來說，瀏覽器並不知道變數 font-md 要如何被編譯，所以實際運行時預先處理你用 sass 撰寫的樣式（如下圖）後，最終輸出的還是標準的 css 內容。