摘要：許多開(kāi)發(fā)人員花時(shí)間在使用的預(yù)處理器上如和。傳統(tǒng)的預(yù)處理器的問(wèn)題不能擴(kuò)展。有些預(yù)處理器提供諸如的功能，可以徹底不使用它們。每個(gè)預(yù)處理器已經(jīng)有了自己的標(biāo)準(zhǔn)。如下它被翻譯成嗯我從來(lái)沒(méi)有說(shuō)過(guò)所有的插件都是有用的結(jié)束語(yǔ)和預(yù)處理器是偉大的。

許多開(kāi)發(fā)人員花時(shí)間在使用CSS的預(yù)處理器上如less,sass和stylus。這些工具已經(jīng)成為Web開(kāi)發(fā)的重要組成部分。寫(xiě)一個(gè)網(wǎng)站的樣式，不使用嵌套，變量或混入等功能很少見(jiàn)。它們每個(gè)都是非常實(shí)用的，讓我們退后一步看，考慮以這種方式使用預(yù)處理器是不是最好的辦法。
傳統(tǒng)的預(yù)處理器的問(wèn)題：
不能擴(kuò)展。無(wú)論您選擇哪種預(yù)處理，都被限制到設(shè)定的，它提供的功能。如果您需要在其上構(gòu)建功能，在構(gòu)建過(guò)程中,你需要添加一個(gè)多帶帶的步驟。如果你想寫(xiě)一個(gè)擴(kuò)展，只能針對(duì)你自己的。
不能剔除任何功能。有些預(yù)處理器提供諸如sass的@extend 功能，可以徹底不使用它們。當(dāng)你不使用它們，卻無(wú)法刪除該工具的這個(gè)功能，減少代碼的體積。
自己的CSS標(biāo)準(zhǔn)。每個(gè)預(yù)處理器已經(jīng)有了自己的標(biāo)準(zhǔn)。但并不是W3C標(biāo)準(zhǔn)，這意味著它們不會(huì)被新的W3C標(biāo)準(zhǔn)兼容。

下面要介紹的PostCSS，就是解決以上問(wèn)題的工具。
什么是PostCSS？
PostCSS不是預(yù)處理器; 它不改變CSS。它本身并不完成css工作。它的作用是提供一個(gè)CSS解析器和創(chuàng)建可以分析，測(cè)試，處理資源，優(yōu)化，創(chuàng)建回調(diào)，和傳輸給其它解析CSS框架的插件的框架。PostCSS把CSS解析成抽象語(yǔ)法樹(shù)（AST），通過(guò)一系列的插件，然后重新編譯成一個(gè)字符串。如果你熟悉JavaScript工具，那么可以把PostCSS類比為CSS的Babel。目前有超過(guò)200個(gè)PostCSS插件，其中有許多在的PostCSS GitHub的頁(yè)上列出，而另一些可以在PostCSS 的postcss.parts目錄中找到。PostCSS可以集成在大多數(shù)構(gòu)建工具，包括gulp，grunt，WebPack或NPM。那么，如何用PostCSS解決我們前面列出的問(wèn)題？

每個(gè)插件多帶帶安裝。選擇需要插件以及順序應(yīng)用。通常情況下，插件可以使用另外一些設(shè)置選項(xiàng)進(jìn)行配置。

您可以編寫(xiě)自己的插件。每個(gè)插件PostCSS接收解析CSS作為輸入?yún)?shù)，分析或修改它，并以同樣的方式返回。這意味著，插件不需要處理解析CSS和轉(zhuǎn)換回成一個(gè)字符串。因此很容易構(gòu)建自己的插件。

PostCSS可以用來(lái)寫(xiě)出符合W3C的CSS。有很多插件，旨在實(shí)現(xiàn)新的W3C規(guī)范功能。這將使你寫(xiě)一個(gè)標(biāo)準(zhǔn)的對(duì)未來(lái)版本兼容的css代碼。

怎樣使用PostCSS
安裝PostCSS，我們不會(huì)進(jìn)入太多有關(guān)設(shè)置的細(xì)節(jié)。我們會(huì)在命令行直接運(yùn)行PostCSS。你可以在在Github的頁(yè)面上找到各構(gòu)建工具中如何使用PostCSS工具的詳細(xì)信息。
安裝PostCSS
PostCSS通過(guò)node與npm安裝，請(qǐng)確保已經(jīng)在開(kāi)始前安裝了node。把PostCSS安裝在全局，代碼如下：

npm install -g postcss-cli

運(yùn)行下面代碼，查看是否安裝上：

postcss --help

在屏幕會(huì)給你打出postcss接受的參數(shù)列表。也可以參照postcss-CLI documenation。
運(yùn)行PostCSS
PostCSS安裝成功，下面做一個(gè)小DEMO。創(chuàng)建styles.css文件，并添加一些CSS樣式。例如，定義一個(gè)Flexbox的容器：

.container  { 
  display: flex
 }

Flexbox需要瀏覽器前綴才能在對(duì)應(yīng)的瀏覽器上運(yùn)行。如果不想手動(dòng)維護(hù)，Autoprefixer是PostCSS插件，完成自動(dòng)維護(hù)的工作。它會(huì)基于can i use所提供的信息,自動(dòng)添加供應(yīng)商前綴。下面將先放你如何使用Autoprefixer維護(hù)瀏覽器前綴。
安裝Autoprefixer，運(yùn)行下面命令：

npm install -g autoprefixer

接下來(lái)，切換到項(xiàng)目文件夾，創(chuàng)建一個(gè)DIST文件夾，并把處理好的css放到里面：

mkdir dist

然后運(yùn)行PostCSS：

postcss -u autoprefixer styles.css -d dist

上面命令的意思是：運(yùn)行Autoprefixer 處理styles.css并輸出到DIST / styles.css?，F(xiàn)在，打開(kāi)DIST / Styles.css中會(huì)看到所有需要的瀏覽器前綴的css都已經(jīng)加上：

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

運(yùn)行PostCSS -w標(biāo)識(shí)，會(huì)啟動(dòng)一個(gè)watcher監(jiān)聽(tīng)進(jìn)程，當(dāng)styles.css的文件被修改，則會(huì)自動(dòng)處理。
插件配置我們可以根據(jù)需要來(lái)配置Autoprefixer的瀏覽器前綴。通過(guò)設(shè)置browsers選項(xiàng)來(lái)完成。當(dāng)通過(guò)命令行運(yùn)行PostCSS，插件配置需要在.json文件中定義，例如，postcss.json。讓我們?cè)诋?dāng)前文件夾中創(chuàng)建文件，并配置Autoprefixer支持的瀏覽器的最新的2個(gè)版本。

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

現(xiàn)在可以重新運(yùn)行PostCSS并根據(jù)新的配置文件監(jiān)聽(tīng)：

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

啟用source map
source map是用于調(diào)試編譯CSS必不可少的。PostCSS可以生成輸出文件內(nèi)聯(lián)source map，通過(guò)設(shè)置--map選項(xiàng)（或-m標(biāo)識(shí)）。
更多postcss插件
PostCSS有一個(gè)驚人的插件庫(kù)，包括測(cè)試，質(zhì)量檢查，回退，老的瀏覽器支持，內(nèi)聯(lián)資源,雪碧圖生成，優(yōu)化，新的語(yǔ)法支持，以及未來(lái)的CSS特性。正如前面提到的，你可以在插件的結(jié)構(gòu)目錄postcss.parts中找到。
做一個(gè)demo，使用幾個(gè)插件，展示一下PostCSS的作用。
CSS變量的自定義屬性插件
postcss-custom-properties插件的作用，實(shí)現(xiàn)對(duì)支持W3C自定義屬性規(guī)范（又名本地變量）。在選擇器的自定義屬性為任意值，并在樣式表其他地方引用。
這和less,sass中變量的功能相同：存放值和消除代碼重復(fù)。主要的區(qū)別是，作用域是有點(diǎn)不同; 類似于常規(guī)屬性，CSS自定義屬性沿元素級(jí)聯(lián)傳播，而不是塊級(jí)范圍。
下面是這個(gè)插件如何工作的一個(gè)例子。代碼：

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

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

將編譯為：

.container {
  width: 800px;}

自定義選擇器插件
postcss-custom-selectors插件實(shí)現(xiàn)了自定義選擇器規(guī)范?？梢灶A(yù)先定義選擇器，并在后面引用它們。例如，我們可以保存所有標(biāo)題的一個(gè)選擇器，并重新使用它作為一個(gè)變量：

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

:--headings {
  color: mediumblue;}

這將編譯如下：

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

俄羅斯樣式表插件
曾經(jīng)想學(xué)習(xí)俄語(yǔ)，但寫(xiě)CSS太忙？不用擔(dān)心，現(xiàn)在可以用俄羅斯語(yǔ)寫(xiě)CSS啦！只需使用俄語(yǔ)樣式插件。如下：

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

它被翻譯成：

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

嗯......我從來(lái)沒(méi)有說(shuō)過(guò)所有的插件都是有用的！
結(jié)束語(yǔ)
less和sass預(yù)處理器是偉大的。很大程度改善了我們的開(kāi)發(fā)過(guò)程。但現(xiàn)在，停下來(lái)，重新思考以后的開(kāi)發(fā)，這些工具是否還是最好的選擇。
我們不只是需要新的功能來(lái)寫(xiě)樣式，我們還需要模塊化，更多的新標(biāo)準(zhǔn)，以及靈活的構(gòu)建進(jìn)程。PostCSS也是這樣做的，它可能會(huì)使CSS世界的游戲規(guī)則改變。
原文：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