每一個Coder都應瞭解到底什麼是PostCSS【譯】

我最近在一些工做流當中採用了PostCSS —— Meteor工做流、簡單的React和Webpack工做流。我知道我必須得去使用它，由於全部人都很興奮地去用，並且它也確實從沒讓我失望過。你將會看到一些我還沒不太知道PostCSS是什麼以前的一些想法。

這裏是你可能有的一些對PostCSS的想法：

1. 你可能以爲它是個預處理器替代品
2. 你可能感受很難把它加進如今的工做流
3. 你可能並不知道本身已經在使用它，經過Autoprefixer插件
4. 你可能以爲本身並不須要它

我盡力一條條闡述清楚。這些僅僅是我我的的觀點，固然，確定也有不少人和我想法相似。

你可能以爲它是個預處理器替代品

固然它不是，PostCSS是一個使用特殊附加語法讀取你的CSS代碼，再處理它最後返回普通CSS代碼的JavaScript工具。那這對你來講有什麼意義？意義就是你仍是能夠用喜歡的預處理器，你也能夠在這些預處理器沒效果的地方使用PostCSS，好比檢測、添加前綴和CSS4的特性。意味這你能以PostCSS plugin的形式去寫一些邏輯，它會按你讓它作的去作。你能夠在這裏postcss.part找到許多爲PostCSS提供的插件，可是PostCSS最強大的地方是你能夠爲它編寫你本身的自定義插件。這點很牛由於這很模塊化。請看一下官方文檔plugin development documentation。

只用記住它不是一個預處理器替代品，儘管你想讓它去替代它確實也能。有個很好的例子，看一下PreCSS Plugin的包，這就是一個不少PostCSS Plugin構成的工具集合，它能替代你的Sass預處理器。

習慣了使用Sass或者Stylus，你仍是能使用它，預處理以後你仍是能用PostCSS的插件去處理它。

你可能感受很難把它加進如今的工做流

你可能在使用一些構建工具，好比Gulp、Grunt、webpack。若是這樣，你只用安裝合適的插件就行。你將會找到和它相關的Grunt tasks、Gulp tasks，和Webpack loaders。

它很是模塊化和靈活，你只要選擇本身真正須要的插件，你不用像安裝預處理器同樣安裝全部的功能。

你可能並不知道本身已經在使用它，經過Autoprefixer插件

有趣的是不少人一直都在用Autoprefixer但他們並不知道，事實上，這個場景下他們用的是PostCSS。Autoprefixer就是一個PostCSS插件，負責拿到你的CSS，檢查它的瀏覽器兼容性，添加特定的必要的頭部給你的CSS聲明。這是一個很好的例子說明PostCSS plugins在作什麼。

有幾個預處理器插件實現了Autoprefixer，最經常使用的是autoprefixer-stylus和less-plugin-autoprefix 。他們只是在底層利用了PostCSS和Autoprefixer plugin。

你可能以爲本身並不須要它

有一些人以爲本身只用Sass和Stylus就夠了，我能理解他們，由於確實一些狀況下這就足夠了。可是，讓我看看一些狀況下咱們的預處理器並不能知足需求。

第一，Autoprefixer 插件的例子。

第二，Stylelint。Stylelint是一個很是棒的PostCSS插件，提供了對CSS檢測的工具，和不少配置項。

第三，Lost Grid System。Lost Grid System是一個很棒的柵格系統，被寫成了一個PostCSS插件。

最後一個例子是CSSNext。使用這個PostCSS插件，你能夠用未來的CSS4語法。

當咱們談論PostCSS的時候，咱們在談論什麼

當咱們在說PostCSS的時候，咱們可能在交替地討論如下兩種狀況：

1. PostCSS自己，你能夠運行npm install postcss會獲得的
2. PostCSS這個工具支持的插件體系

這個工具自己是一個NodeJs模塊，將CSS解析成AST(抽象語法樹)，傳遞這個AST給一些插件內的方法，最後再將它轉回字符串，你就能夠將它輸出到文件中。AST通過的函數可能會也可能不會轉化它，同時source-map會生成以跟蹤任何的改變。

AST提供了一個很簡單直接的Api，開發者能用它來開發plugin。好比，你能夠經過css.eachRule()用到每個設置進文件規則，或者經過rule.eachDecl()拿到每個聲明，經過rule.selector獲取規則集，經過atRule.name獲取規則名稱。你會發現，PostCSS讓你很容易去操做CSS源碼。

PostCSS能夠爲各類閱讀和操做你的CSS的插件提供強大的支持。

記住一點，PostCSS自己和它的插件體系，都不和Sass和Less有直接相似的地方。可是，將一些相關的將用戶友好stylesheets轉化成瀏覽器友好stylesheets的插件綁定在一塊兒，它們就有了和預處理器類似的做用。

可是也請記住，這些插件體系的補充內容。沒有哪一個插件或包是或者能表明PostCSS。

---

本文翻譯自 julian.io/some-things… 和 davidtheclark.com/its-time-fo…