CSS 前處理器和後處理器都能擴充套件 CSS 的功能，但它們在工作方式和目的上有所不同。
CSS 前處理器
- 工作方式： 前處理器在瀏覽器解析 CSS 之前執行。它們使用一種特殊的語法（類似 CSS，但更強大），然後將其編譯成常規的 CSS 程式碼。
- 目的： 主要目的是提高 CSS 的開發效率，提供一些原生 CSS 缺失的功能，例如變數、巢狀、混合（mixins）、函式等等，使程式碼更易於維護和組織。
- 常見前處理器：
- Sass (Syntactically Awesome Style Sheets): 最流行的前處理器之一，功能強大，語法優雅，使用 Ruby 編寫，支援多種語法格式 (SCSS, Sass, indented Sass)。
- Less (Leaner Style Sheets): 比 Sass 輕量，學習曲線較低，使用 JavaScript 編寫。
- Stylus: 語法簡潔靈活，功能豐富，受 Node.js 支援，也支援多種語法格式。
- PostCSS: 嚴格來說，PostCSS 本身不是一個前處理器，而是一個 CSS 轉換工具。它可以透過外掛實現前處理器的功能，例如變數、巢狀等，也可以用於後處理，例如自動新增瀏覽器字首。
CSS 後處理器
- 工作方式： 後處理器在 CSS 編譯完成後執行，通常作為構建過程的一部分。它們會分析已生成的 CSS 程式碼，並對其進行最佳化或新增額外的功能。
- 目的： 主要目的是最佳化 CSS 程式碼，例如自動新增瀏覽器字首、壓縮程式碼、移除未使用的樣式等，以提高網站的效能。
- 常見後處理器/工具 (很多時候會結合PostCSS使用):
- Autoprefixer: 自動新增瀏覽器字首，解決跨瀏覽器相容性問題。
- cssnano: 壓縮 CSS 程式碼，減小檔案大小，提高載入速度。
- PurgeCSS: 移除未使用的 CSS 程式碼，減小檔案大小，提高載入速度，特別適用於大型專案。
- PostCSS plugins: PostCSS 有豐富的外掛生態，可以實現各種後處理功能，例如最佳化媒體查詢、生成 sprites 等。
主要區別總結：
| 特性 | 前處理器 | 後處理器 |
|---|---|---|
| 工作時機 | 編譯前 | 編譯後 |
| 主要目的 | 提高開發效率，增強 CSS 功能 | 最佳化 CSS 程式碼，提高網站效能 |
| 輸入 | 特殊語法 (例如 SCSS, Less) | 標準 CSS 程式碼 |
| 輸出 | 標準 CSS 程式碼 | 最佳化後的 CSS 程式碼 |
| 典型功能 | 變數、巢狀、混合、函式 | 自動新增字首、壓縮、移除未使用的樣式、最佳化媒體查詢 |
簡單來說，前處理器讓你寫 CSS 更方便，而後處理器讓你的 CSS 更高效。在實際專案中，常常會同時使用前處理器和後處理器，例如使用 Sass 編寫樣式，然後使用 PostCSS 和 Autoprefixer 新增瀏覽器字首並壓縮程式碼。