因為我是前端剛入門，昨天看了一個大神寫的的初級前端需要掌握的知識，然後我就開始一一搜索，下麵是我對css預處理器和後處理器的搜索結果，一是和大家分享下這方面的知識，另一方面方便自己以後翻閱。所以感興趣的可以看下。 轉載自"趙雷的博客"，原文地址：http://zhaolei.info/2014/01 ...
因為我是前端剛入門，昨天看了一個大神寫的的初級前端需要掌握的知識，然後我就開始一一搜索，下麵是我對css預處理器和後處理器的搜索結果，一是和大家分享下這方面的知識，另一方面方便自己以後翻閱。所以感興趣的可以看下。
轉載自"趙雷的博客"，原文地址：http://zhaolei.info/2014/01/04/css-preprocessor-and-postprocessor/
說到 CSS 預處理器，大家都很熟悉了，本文的重點是介紹從中抽出的 CSS 後處理器，這也是近一年多以來，前端社區的一些新趨勢。
將 CSS 後處理器 抽象出來之後，會對 CSS 的 開發模式 帶來一些變化，下麵從概念開始說起。
CSS 預處理器
廣義上說，目標格式為 CSS 的 預處理器 是 CSS 預處理器，但本文 特指 以最終生成 CSS 為目的的 領域特定語言。Sass、LESS、Stylus 是目前最主流的 CSS 預處理器。
示例
下麵以 LESS 為例：
LESS
| 1 2 3 4 5 6 7 | .opacity(@opacity: 100) { opacity: @opacity / 100; filter: ~"alpha(opacity=@{opacity})"; } .sidebar { .opacity(50); } |
將以上 DSL 源代碼 (LESS)，編譯成 CSS：
| 1 2 3 4 | .sidebar { opacity: 0.5; filter: alpha(opacity=50); } |
可以看到，編譯前 與 編譯後 是完全不同的語言。
實現原理
- 取到 DSL 源代碼 的 分析樹
- 將含有 動態生成 相關節點的 分析樹 轉換為 靜態分析樹
- 將 靜態分析樹 轉換為 CSS 的 靜態分析樹
- 將 CSS 的 靜態分析樹 轉換為 CSS 代碼
現實中的 CSS 預處理器 更複雜一點兒，因為大多功能要同時支持 特有 DSL 與 原生 CSS，一件事情要同時考慮兩種情況下的處理。
優缺點
- 優點：語言級邏輯處理，動態特性，改善項目結構
- 缺點：採用特殊語法，框架耦合度高，複雜度高
CSS 後處理器
CSS 後處理器 是對 CSS 進行處理，並最終生成 CSS 的 預處理器，它屬於廣義上的 CSS 預處理器。
我們很久以前就在用 CSS 後處理器 了，最典型的例子是 CSS 壓縮工具（如 clean-css），只不過以前沒單獨拿出來說過。
還有最近比較火的 Autoprefixer，以 Can I Use 上的 瀏覽器支持數據 為基礎，自動處理相容性問題。
示例
以 Autoprefixer 為例：
| 1 2 3 4 5 6 | .container { display: flex; } .item { flex: 1; } |
將以上 標準 CSS，編譯為處理了相容性的 生產環境 CSS：
| 1 2 3 4 5 6 7 8 9 10 11 12 | .container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } |
可以看到，編譯前 與 編譯後 的代碼都是 CSS。
如果你使用 Sublime Text，可以通過 Package Control 安裝 Autoprefixer 插件體驗一下。
實現原理
- 將 源代碼 做為 CSS 解析，獲得 分析樹
- 對 CSS 的 分析樹 進行 後處理
- 將 CSS 的 分析樹 轉換為 CSS 代碼
優缺點
- 優點：使用 CSS 語法，容易進行模塊化，貼近 CSS 的未來標準
- 缺點：邏輯處理能力有限
開發模式的變化
原來的開發模式是這樣的：
DSL 源代碼 -> 生產環境 CSS
與原來相比，新的 開發模式 最大的變化是面向 標準 CSS 編程，將 相容性、優化 部分交給 CSS 後處理器 自動完成：
DSL 源代碼 -> 標準 CSS -> 生產環境 CSS
等到眾多 CSS 未來標準 在 CSS 後處理器 層面實現之後，部分項目甚至可以回歸到使用 標準 CSS 編程的模式：
標準 CSS（包含未來標準的後處理器實現）-> 生產環境 CSS
以下有一些簡單對比：
| 對比項 | 預處理器 | 後處理器 | 兩者同時使用 |
|---|---|---|---|
| 語言學習成本 | DSL | CSS √ | DSL |
| 目標輸出結果 | 生產環境 CSS | 標準 CSS √ | 標準 CSS √ |
| 相容性處理耦合度 | 高，依賴 DSL 框架 | 低，依賴後處理器 √ | 低，依賴後處理器 √ |
| 可編程性 | 高，語言級邏輯處理 √ | 中，擴展 CSS 語法 | 高，語言級邏輯處理 √ |
現在我推薦 CSS 預處理器 與 CSS 後處理器 同時使用，各自做他們最擅長的部分。
我當回神棍，預計以後會有這樣的趨勢：
- 越來越多專註於 單一功能 的小型 CSS 工具庫
- CSS 樣式庫 從 整體方案 到 模塊化組合方案 轉變
- 部分 CSS 未來標準 在 CSS 預處理器 中得到支持
- 原生 CSS 和 CSS 後處理器 的組合成為新選擇
優秀的 CSS 後處理器框架
Rework
Rework 是一個 高效、簡單、易擴展 並且 模塊化 的 CSS預處理器。
它在 2012 年 9 月才發佈了第一個版本，是 Stylus 的作者 TJ Holowaychuk 大神挖的新坑。
實際上，他採用的是 CSS 後處理器 的模型，在其之上有一個模仿 Stylus 風格縮進嵌套的工具 styl，其 CSS 預處理器 部分功能是在 Rework 開始工作之前通過 css-whitespace 實現的。
有一些基於 Rework 的樣式庫，參考了 CSS 標準草案 或 CSS 標準提案，相當於支持了 CSS 的未來標準，如 rework-vars、rework-font-variant、rework-calc、rework-color-function 等。
是不是聽起來有點暈？這正說明它的模塊化做的非常好，你可以按照實際需要，組合 CSS 框架，比如 Myth。
概括一下 Rework 的特點：
- JavaScript 中直接操作 CSS 解析對象，擴展方便
- 可以 自由組合模塊，按需定製 CSS 工具庫
- CSS 後處理器 的模型決定它的模塊傾向 CSS 未來標準
- 除 伺服器 端外，也支持在 瀏覽器 環境運行
Rework 還很年輕，還需要更多的時間積累。
PostCSS
PostCSS 是一個 CSS 後處理器 框架，允許你通過 JavaScript 對 CSS 進行修改。
它的第一個版本發佈於 2013 年 11 月，是從 Autoprefixer 項目中抽象出的框架。
PostCSS 有以下特點：
- 它和
Rework非常相似，但提供了 更高級的 API，更易擴展 - 它可以在現有 Source Map 的基礎上生成新的 Source Map
- 在 原有 CSS 格式 的保留方面做的更好，便於開發 編輯器插件
- 比
Rework更年輕，還只有Autoprefixer一個成功案例
其實 Autoprefixer 最初是基於 Rework 做的，但後來作者有更多需求（上面的列表），就造了 PostCSS 這個輪子。
最後
CSS 後處理器 的出現讓 CSS 工作流 更清晰，但現在他們還遠未成熟，還有很多地方能夠做的更好。
比如 Autoprefixer 只做語法 Prefix 層面的相容，還需要一些專門處理如 IE 濾鏡相容 這些問題的小模塊配合使用。
比如可以針對 CSS 中單獨使用的 圖片 自動做 CSS Sprites 歸類與合併 的工作。
比如可以根據項目對 圖標字體 字形的實際使用情況自動對字體進行 體積優化。
當每個模塊都專註於特定的問題時，那他多數情況下要比一個大而全的集中式框架更靠譜。
或許你也可以考慮基於 Rework 或 PostCSS 寫個 CSS 後處理器 玩玩？
