【翻譯】PostCSS簡介

許多開發人員花時間在使用CSS的預處理器上如less,sass和stylus。這些工具已經成爲Web開發的重要組成部分。寫一個網站的樣式，不使用嵌套，變量或混入等功能不多見。它們每一個都是很是實用的，讓咱們退後一步看，考慮以這種方式使用預處理器是否是最好的辦法。
傳統的預處理器的問題：
不能擴展。不管您選擇哪一種預處理，都被限制到設定的，它提供的功能。若是您須要在其上構建功能，在構建過程當中,你須要添加一個單獨的步驟。若是你想寫一個擴展，只能針對你本身的。
不能剔除任何功能。有些預處理器提供諸如sass的@extend 功能，能夠完全不使用它們。當你不使用它們，卻沒法刪除該工具的這個功能，減小代碼的體積。
本身的CSS標準。每一個預處理器已經有了本身的標準。但並非W3C標準，這意味着它們不會被新的W3C標準兼容。

下面要介紹的PostCSS，就是解決以上問題的工具。
什麼是PostCSS？
PostCSS不是預處理器; 它不改變CSS。它自己並不完成css工做。它的做用是提供一個CSS解析器和建立能夠分析，測試，處理資源，優化，建立回調，和傳輸給其它解析CSS框架的插件的框架。PostCSS把CSS解析成抽象語法樹（AST），經過一系列的插件，而後從新編譯成一個字符串。若是你熟悉JavaScript工具，那麼能夠把PostCSS類比爲CSS的Babel。目前有超過200個PostCSS插件，其中有許多在的PostCSS GitHub的頁上列出，而另外一些能夠在PostCSS 的postcss.parts目錄中找到。PostCSS能夠集成在大多數構建工具，包括gulp，grunt，WebPack或NPM。那麼，如何用PostCSS解決咱們前面列出的問題？

• 每一個插件單獨安裝。選擇須要插件以及順序應用。一般狀況下，插件可使用另一些設置選項進行配置。

• 您能夠編寫本身的插件。每一個插件PostCSS接收解析CSS做爲輸入參數，分析或修改它，並以一樣的方式返回。這意味着，插件不須要處理解析CSS和轉換回成一個字符串。所以很容易構建本身的插件。

• PostCSS能夠用來寫出符合W3C的CSS。有不少插件，旨在實現新的W3C規範功能。這將使你寫一個標準的對將來版本兼容的css代碼。

怎樣使用PostCSS
安裝PostCSS，咱們不會進入太多有關設置的細節。咱們會在命令行直接運行PostCSS。你能夠在在Github的頁面上找到各構建工具中如何使用PostCSS工具的詳細信息。
安裝PostCSS
PostCSS經過node與npm安裝，請確保已經在開始前安裝了node。把PostCSS安裝在全局，代碼以下：

npm install -g postcss-cli

運行下面代碼，查看是否安裝上：

postcss --help

在屏幕會給你打出postcss接受的參數列表。也能夠參照postcss-CLI documenation。
運行PostCSS
PostCSS安裝成功，下面作一個小DEMO。建立styles.css文件，並添加一些CSS樣式。例如，定義一個Flexbox的容器：

.container  { 
  display: flex
 }

Flexbox須要瀏覽器前綴才能在對應的瀏覽器上運行。若是不想手動維護，Autoprefixer是PostCSS插件，完成自動維護的工做。它會基於can i use所提供的信息,自動添加供應商前綴。下面將先放你如何使用Autoprefixer維護瀏覽器前綴。
安裝Autoprefixer，運行下面命令：

npm install -g autoprefixer

接下來，切換到項目文件夾，建立一個DIST文件夾，並把處理好的css放到裏面：

mkdir dist

而後運行PostCSS：

postcss -u autoprefixer styles.css -d dist

上面命令的意思是：運行Autoprefixer 處理styles.css並輸出到DIST / styles.css。如今，打開DIST / Styles.css中會看到全部須要的瀏覽器前綴的css都已經加上：

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;}

運行PostCSS -w標識，會啓動一個watcher監聽進程，當styles.css的文件被修改，則會自動處理。
插件配置咱們能夠根據須要來配置Autoprefixer的瀏覽器前綴。經過設置browsers選項來完成。當經過命令行運行PostCSS，插件配置須要在.json文件中定義，例如，postcss.json。讓咱們在當前文件夾中建立文件，並配置Autoprefixer支持的瀏覽器的最新的2個版本。

{
  "autoprefixer": {
    "browsers": ["last 2 versions"]
  }}

如今能夠從新運行PostCSS並根據新的配置文件監聽：

postcss styles.css -u autoprefixer -c postcss.json -d dist -w

啓用source map
source map是用於調試編譯CSS必不可少的。PostCSS能夠生成輸出文件內聯source map，經過設置--map選項（或-m標識）。
更多postcss插件
PostCSS有一個驚人的插件庫，包括測試，質量檢查，回退，老的瀏覽器支持，內聯資源,雪碧圖生成，優化，新的語法支持，以及將來的CSS特性。正如前面提到的，你能夠在插件的結構目錄postcss.parts中找到。
作一個demo，使用幾個插件，展現一下PostCSS的做用。
CSS變量的自定義屬性插件
postcss-custom-properties插件的做用，實現對支持W3C自定義屬性規範（又名本地變量）。在選擇器的自定義屬性爲任意值，並在樣式表其餘地方引用。
這和less,sass中變量的功能相同：存放值和消除代碼重複。主要的區別是，做用域是有點不一樣; 相似於常規屬性，CSS自定義屬性沿元素級聯傳播，而不是塊級範圍。
下面是這個插件如何工做的一個例子。代碼：

:root {
  --container-width: 800px;}

.container {
  width: var(--container-width);}

將編譯爲：

.container {
  width: 800px;}

自定義選擇器插件
postcss-custom-selectors插件實現了自定義選擇器規範。能夠預先定義選擇器，並在後面引用它們。例如，咱們能夠保存全部標題的一個選擇器，並從新使用它做爲一個變量：

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

:--headings {
  color: mediumblue;}

這將編譯以下：

h1,
h2,
h3,
h4,
h5,
h6 {
  color: mediumblue;}

俄羅斯樣式表插件
曾經想學習俄語，但寫CSS太忙？不用擔憂，如今能夠用俄羅斯語寫CSS啦！只需使用俄語樣式插件。以下：

h1 { 
  размер-шрифта :  20 пикселей ; 
  цвет : красный ; 
  цвет-фона : белый ; 
  вес-шрифта : жирный ; }

它被翻譯成：

h1 {
  font-size: 20px;
  color: red;
  background-color: white;
  font-weight: bold;}

嗯......我歷來沒有說過全部的插件都是有用的！
結束語
less和sass預處理器是偉大的。很大程度改善了咱們的開發過程。但如今，停下來，從新思考之後的開發，這些工具是否仍是最好的選擇。
咱們不僅是須要新的功能來寫樣式，咱們還須要模塊化，更多的新標準，以及靈活的構建進程。PostCSS也是這樣作的，它可能會使CSS世界的遊戲規則改變。
原文：An Introduction to PostCSS
原文連接：http://www.sitepoint.com/an-introduction-to-postcss/?utm_source=sitepoint&utm_medium=relatedinline&utm_term=html-css&utm_campaign=relatedauthor