CSS 處理器 Sass 與 PostCSS 優化 定義預處理與後處理器差異以提升相容性

什麼是 CSS 處理器？

CSS 處理器 是指用於增強原生 CSS 功能並優化開發流程的工具，主要分為 預處理器 (Preprocessors) 與 後處理器 (Postprocessors) 兩大類。預處理器（如 Sass/SCSS、Less）允許開發者使用變數、巢狀結構、Mixin 與函數等類似程式語言的語法撰寫樣式，最後再編譯為標準 CSS。而後處理器（如 PostCSS）則是針對編譯後的 CSS 進行後製處理，透過外掛實作自動添加瀏覽器前綴（Autoprefixer）、語法檢查（Stylelint）或 CSS 壓縮。掌握這些工具能大幅降低程式碼冗餘，並確保網頁在不同瀏覽器間的穩定呈現。

隨著 CSS 開始越來越複雜，由於 CSS 語法 受限而發展出了 CSS Pre-/Post-processors (預處理器和後處理器) 來拓展和優化寫法。這份指南將帶您深入了解這些強大的工具。

什麼是 CSS 預處理器：Sass/SCSS 的核心功能

CSS 預處理器 是個能透過該預處理器語法，產生純 CSS 的程式。主流的 CSS 預處理器 主要有 Sass/SCSS、Stylus、Less 三種。
處理器會加入 CSS 所沒有的功能像是 Mixin、巢狀選擇器、繼承選擇器等等，增加 CSS 結構 的可讀性、可維護性。

Sass/SCSS 深度解析：變數、巢狀與 Mixin 應用

Sass/SCSS 讓 CSS 成為真正的程式語言，這篇文章主要以 SCSS 來做介紹：

• 變數使用
• 判斷/迴圈
• 巢狀結構
• @mixin / @extend

變數使用

使用定義主色調，這樣在未來需要調整主色調時速度會快很多，不用全部搜尋再取代還擔心取代錯誤。

$primary-color: #ffffff;
$second-color: #000000;

巢狀結構

巢狀結構減少重複輸入 Parent 的選擇器，可以少打一些字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// CSS 原生寫法
.list { display: flex; }
.list li { background-color: black; }
.list li a { color: white; }

// SCSS 巢狀寫法
.list {
  display: flex;
  li {
    background-color: black;
    a {
      color: white;
    }
  }
}

@mixin

@mixin 的做法是可以帶入變數，然後生成客製化樣式，譬如當同樣的一個版但需要套不同圖或是顏色，這樣的做法就會非常方便。

1
2
3
4
5
6
7
8
9
10

@mixin setSpecail($size, $color) {
  font-size: $size;
  color: $color;
}
.IAmSpecailOne {
  @include setSpecail(16px, red);
}
.IAmSpecailTwo {
  @include setSpecail(20px, blue);
}

@extend

@extend 就比較單純可以當成注入性質。

1
2
3
4
5
6
7
8
9

%button {
  width: 80px;
  height: 40px;
}

.button--primary {
  @extend %button;
  background-color: white;
}

什麼是 CSS 後處理器：PostCSS 的彈性與擴展性

CSS 後處理器 是讓 CSS 經過擴充功能 (Plugin) 後製處理，這裡主要介紹以 PostCSS 為主。

PostCSS 的核心優勢在於其模組化和可擴展性，能透過各種外掛實現強大的功能，例如：

• Autoprefixer: 會協助加入跨瀏覽器支援的相關前綴詞 (Prefix) -webkit-、-moz-，來源是 Can I Use。
• Stylelint: 語法檢查和報錯。
• Lost: Grid System。

PostCSS 通常會和 Webpack、Grunt、Parcel、Gulp 等打包工具一起使用，可以想像成是女孩子隨時能補的 BB 霜。後處理器著重在防呆和支援性，接下來以加入 Autoprefixer 為例：

1. npm install postcss postcss-loader autoprefixer --save-dev
2. postcss.config.js 配置：

1
2
3

module.exports = {
  plugins: [require("autoprefixer")],
};

不過還是要注意像是隱藏 Scroll Bar 這類特殊的用法還是要自己處理：

1
2
3
4
5

.hide-scrollbar {
  overflow: auto;
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
}

FAQ：CSS 處理器常見問題

Q1：Sass (Sass) 與 SCSS 有什麼不同？

A：SCSS (Sassy CSS) 是 Sass 3 引入的語法，它完全相容 CSS 的大括號 {} 與分號 ; 寫法，對開發者來說學習曲線最低。而舊版的 Sass 語法則使用縮進（Indentation）來區分結構，不使用括號。目前業界主流大多使用 SCSS。

Q2：我已經使用了 SCSS，還需要 PostCSS 嗎？

A：非常需要。 兩者並不衝突且經常並存。SCSS 負責撰寫時的「邏輯組織」（變數、巢狀）；而 PostCSS（特別是 Autoprefixer）負責產出後的「相容性處理」。讓 Sass 處理程式碼結構，讓 PostCSS 處理瀏覽器差異，是目前前端工程化的最佳實務。

Q3：@mixin 與 @extend 該選哪一個？

A：如果您需要傳入參數（如動態顏色或大小），請選用 @mixin；如果您只是想在多個選擇器間共享完全相同的程式碼區塊以減少冗餘，@extend 更合適。但要注意 @extend 可能會產生複雜的選擇器關聯，過度使用會讓 CSS 難以追蹤。

透過正確運用 CSS 處理器，您能將原本瑣碎的樣式開發轉化為有條理的工程實踐。持續優化您的工具鏈，為您的 Web 專案打造更穩健的視覺基石！

• ← 上一篇
• 下一篇 →