[翻譯]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的做用。

postcss-custom-properties插件

postcss-custom-properties插件的做用，實現對支持W3C自定義屬性規範（又名本地變量）。在選擇器的自定義屬性爲任意值，並在樣式表其餘地方引用。
這和less,sass中變量的功能相同：存放值和消除代碼重複。主要的區別是，做用域是有點不一樣; 相似於常規屬性，CSS自定義屬性沿元素級聯傳播，而不是塊級範圍。
下面是這個插件如何工做的一個例子。代碼：

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

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

將編譯爲：

.container {
width: 800px;}

postcss-custom-selectors插件

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