????????在web開發中使用css來構建網頁時，css規范在瀏覽器兼容性方面一直存在各種各樣的問題，不同瀏覽器在css規范的實現方面的進度也存在很大差異，同時，css規范本身的發展速度與社區的期待還存在一定的差距。雖然less,sass這類預處理器在編譯時也可以做到補全css代碼兼容性前綴等很多實用的功能，但是如果我不想寫，或者不會寫less只能寫css呢，這里就要介紹postcss-loader和其一些主流插件了。
PostCSS 介紹
????????PostCSS 本身是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理。插件基于 CSS 代碼的 AST 所能進行的操作是多種多樣的，比如可以支持變量和混入（mixin），增加瀏覽器相關的聲明前綴，或是把使用將來的 CSS 規范的樣式規則轉譯（transpile）成當前的 CSS 規范支持的格式。從這個角度來說，PostCSS 的強大之處在于其不斷發展的插件體系。目前 PostCSS 已經有 200 多個功能各異的插件。開發人員也可以根據項目的需要，開發出自己的 PostCSS 插件。
????????PostCSS 從其誕生之時就帶來了社區對其類別劃分的爭議。這主要是由于其名稱中的 post，很容易讓人聯想到 PostCSS 是用來做 CSS 后處理（post-processor）的，從而與已有的 CSS 預處理（pre-processor）語言，如 SASS 和 LESS 等進行類比。實際上，PostCSS 的主要功能只有兩個：第一個就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二個就是調用插件來處理 AST 并得到結果。因此，不能簡單的把 PostCSS 歸類成 CSS 預處理或后處理工具。PostCSS 所能執行的任務非常多，同時涵蓋了傳統意義上的預處理和后處理。PostCSS 是一個全新的工具，給前端開發人員帶來了不一樣的處理 CSS 的方式。
使用 PostCSS
????????PostCSS 一般不單獨使用，而是與已有的構建工具進行集成。PostCSS 與主流的構建工具，如 Webpack、Grunt 和 Gulp 都可以進行集成。完成集成之后，選擇滿足功能需求的 PostCSS 插件并進行配置。下面的代碼將具體展示如何在 Webpack中使用 PostCSS 的 Autoprefixer 插件。
常用插件
Autoprefixer
????????Autoprefixer 是一個流行的 PostCSS 插件，其作用是為 CSS 中的屬性添加瀏覽器特定的前綴。其可以根據需要指定支持的瀏覽器類型和版本，自動添加所需的帶前綴的屬性聲明。開發人員在編寫 CSS 時只需要使用 CSS 規范中的標準屬性名即可。
????????Autoprefixer 使用 Can I Use 網站提供的數據來確定所要添加的不同瀏覽器的前綴。隨著瀏覽器版本的升級，瀏覽器在新版本中可能已經提供了對標準屬性的支持，從而不再需要添加額外的前綴。Autoprefixer 可以配置需要支持的瀏覽器。如“last 2 versions”表示主流瀏覽器的最近兩個版本，“ie 6-8”表示 IE 6 到 8，“> 1%”表示全球使用率大于 1%的瀏覽器版本。
????????Autoprefixer 除了添加所需要的屬性名稱前綴之外，還可以移除 CSS 代碼中冗余的屬性名稱前綴。遺留 CSS 代碼中可能包含由開發人員手動添加的舊版本的瀏覽器所支持的帶前綴的屬性名稱。Autoprefixer 默認情況下會移除這些冗余的前綴。可以通過配置對象中的 remove 屬性來配置該行為。
cssnext
????cssnext 插件允許開發人員在當前的項目中使用 CSS 將來版本中可能會加入的新特性。cssnext 負責把這些新特性轉譯成當前瀏覽器中可以使用的語法。從實現角度來說，cssnext 是一系列與 CSS 將來版本相關的 PostCSS 插件的組合。比如，cssnext 中已經包含了對 Autoprefixer 的使用，因此使用了 cssnext 就不再需要使用 Autoprefixer。
開發 PostCSS 插件
????????雖然 PostCSS 已經有 200 多個插件，但在開發中仍然可能存在已有插件不能滿足需求的情況。這個時候可以開發自己的 PostCSS 插件。開發插件是一件很容易的事情。每個插件本質只是一個 JavaScript 方法，用來對由 PostCSS 解析的 CSS AST 進行處理。
????????每個 PostCSS 插件都是一個 NodeJS 的模塊。使用 postcss 的 plugin 方法來定義一個新的插件。插件需要一個名稱，一般以“postcss-”作為前綴。插件還需要一個進行初始化的方法。該方法的參數是插件所支持的配置選項，而返回值則是另外一個方法，用來進行實際的處理。該處理方法會接受兩個參數，css 代表的是表示 CSS AST 的對象，而 result 代表的是處理結果。
????????下圖中給出了一個簡單的 PostCSS 插件。該插件使用 css 對象的 walkDecls 方法來遍歷所有的“color”屬性聲明，并對“color”屬性值進行檢查。如果屬性值為 black，就使用 result 對象的 warn 方法添加一個警告消息。
上圖的插件的功能比較簡單。PostCSS 插件一般通過不同的方法來對當前的 CSS 樣式規則進行修改。如通過 insertBefore 和 insertAfter 方法來插入新的規則。
小結
對于 CSS 的處理一直都是 Web 開發中的一個復雜問題，其中一部分來源于 CSS 規范，一部分來源于不同瀏覽器實現帶來的兼容性問題。PostCSS 為處理 CSS 提供了一種新的思路。通過 PostCSS 強大的插件體系，可以對 CSS 進行各種不同的轉換和處理，從而盡可能的把繁瑣復雜的工作交由程序去處理，而把開發人員解放出來。本文對 PostCSS 及其常用插件進行了詳細介紹，希望可以幫助開發人員提高開發效率。
參考文獻
https://github.com/postcss/postcss/blob/HEAD/README-cn.md
