提到css預編譯器（css preprocessor），你可能想到Sass、Less以及Stylus。而本文要介紹的PostCSS，正是一個這樣的工具：css預編譯器可以做到的事，它同樣可以做到。

“你說的我都懂，那為什么要用它？”

套裝與單件

如果Sass等預編譯器是新定義了一種模板語言，然后將其轉化為css的話，PostCSS則是更純粹地對css本身做轉換。

回想一下你是如何學習使用css預編譯器的：了解到有這樣一種可以轉化為css的語言，它有很多特性，變量、嵌套、繼承等等，每一種特性都通過一定語法實現。大概就像是遞給你一個已經封裝好的工具箱（量產型？），你可以在里面找有用的東西。

那PostCSS是怎樣呢？PostCSS就像只遞給你一個盒子，但告訴你你可以從旁邊的陳列柜取走自己想要的工具放進盒子打包帶走。如果你覺得陳列柜里的不夠好，PostCSS還可以幫你打造你自己的工具。所以，使用PostCSS，你可以僅取所需。

這就是PostCSS的模塊化（modular）風格。它作為一個css轉換工具，自身很小，其所有的轉換功能都是插件，因此可以個性化配置。

PostCSS的簡要原理

PostCSS自身只包括css分析器，css節點樹API，source map生成器以及css節點樹拼接器。

css的組成單元是一條一條的樣式規則（rule），每一條樣式規則又包含一個或多個屬性&值的定義。所以，PostCSS的執行過程是，先css分析器讀取css字符內容，得到一個完整的節點樹，接下來，對該節點樹進行一系列轉換操作（基于節點樹API的插件），最后，由css節點樹拼接器將轉換后的節點樹重新組成css字符。期間可生成source map表明轉換前后的字符對應關系：

比較有意思的是，PostCSS的插件其實都是JavaScript函數，它們使用PostCSS的節點樹API，對css節點樹進行不同的轉換。

插件預覽

所有插件都可以在PostCSS的主頁中查詢到，這里只選取一小部分示意一下。
Autoprefixer

PostCSS最有名的插件是Autoprefixer。如名所示，可以自動為你添加瀏覽器私有前綴。它的添加值會參考Can I Use及你設定的瀏覽器支持范圍，因此相當可靠。下面是一個示例（以我設定的瀏覽器支持范圍）：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表