PostCSS 介紹
原文 http://segmentfault.com/a/1190000003909268
前言
最近大漠前輩在群里發關于PostCSS的系列文章，但是耗子姐姐又說看了有點云里霧里的感覺，所以這篇文章將按一個思考的角度來理解一下 PostCSS 到底是一個什么東西。
一、提出不懂的地方
很多時候第一次在網上查詢 PostCSS 概念的時候，大家都解釋成一個后處理器的概念，其實個人覺得這些概念不重要，更為重要的有以下幾點：
-
它本質上是一個什么東西？
-
它能解決我們什么問題？
-
它是通過什么方式來解決我們的問題？
-
它解決我們的問題是為什么？
-
怎么實現與SASS、LESS、Stylus相同的功能（因為它們被經常拿來比較）
-
它由哪些東西組成？
-
既然是程序可以用的，那么它的API呢？
Q: 這個時候，你應該會問： 為什么要將組成和API放到最后呢？
A: 那是因為我們在認識一個不太清楚的東西的時候，第一次肯定是一個直觀的認識：它到底有什么用？而不會說，一來就去深入的研究它。不過這里本質還是要先說一下的，先留個印象。
二、個個擊破
1. 它本質上是一個什么東西？
-
PostCSS 可以直觀的理解為：它就是一個平臺、平臺、平臺，重要的事情來三遍比較爽，哈哈！
為什么說它是一個平臺呢？因為我們直接用它，感覺不能干什么事情，但是如果讓一些插件在它上面跑，那么將會很強大。
-
PostCSS 提供了一個解析器，它能夠將 CSS 解析成抽象語法樹（AST）。
上面兩條看完后，我們可以理解為下面這個模型。
所以說，PostCSS 它需要一個插件系統才能夠發揮作用。我們可以通過“插件”來傳遞AST，然后再把AST轉換成一個串，最后再輸出到目標文件中去。當然，這里是有API可以用，這里先不講，免得暈了。
2. 它能解決我們什么問題？它是通過什么方式來解決我們的問題？
上面的圖很清晰，但是我還是不知道是個什么東西！所以接下來溫和點，直接從代碼層面來感官的認識一下。
-
它能夠為 CSS 提供額外的功能；
-
通過在 PostCSS 這個平臺上，我們能夠開發一些插件，來處理我們的CSS，比如熱門的：autoprefixer
-
我們能夠使用JavaScript來開發插件（這點對前端來說很重要）
好吧，看到一個熟悉的單詞了：autoprefixer，這里我們就讓它來當栗子吧，可能更容易理解一點。
首先，我們需要做一些準備，安裝好需要的東西。
// postcss 的命令行工具 sudo npm install -g postcss-cli // autoprefixer 插件 sudo npm install -g autoprefixer
第一次用命令行能讓你更直觀去理解它哈，所以請要有一顆折騰的心。
// 1. 先看下這個命令有哪些參數可以用 postcss --help Usage: /usr/local/bin/postcss -use plugin [--config|-c config.json] [--output|-o output.css] [input.css] 選項： -c, --config JSON file with plugin configuration -u, --use postcss plugin name (can be used multiple times) -o, --output Output file (stdout if not provided) -d, --dir Output directory -r, --replace Replace input file(s) with generated output [boolean] -s, --syntax Alternative input syntax parser -p, --parser Alternative CSS parser -t, --stringifier Alternative output stringifier -w, --watch auto-recompile when detecting source changes -v, --version 顯示版本號 [boolean] -h, --help 顯示幫助信息 [boolean] 示例： postcss --use autoprefixer -c Use autoprefixer as a postcss plugin options.json -o screen.css screen.css postcss --use autoprefixer Pass plugin parameters in --autoprefixer.browsers "> 5%" -o plugin.option notation screen.css screen.css postcss -u postcss-cachify -u Use multiple plugins and multiple autoprefixer -d build *.css input files Please specify at least one plugin name.
PS: 我貼出來是方便大家在看的時候不用電腦……^_^
好吧，先看一下文件目錄，這里我只說一下比較好寫的方式，就是將一些參數配置到配置文件中去。
// config.json: 所有的配置
// p.json: 僅有 autoprefixer 插件的配置
// config.json 的內容
{
"use": ["autoprefixer"],
"input": "src/index.css",
"output": "index.css",
"autoprefixer": {
"browsers": "> 5%"
}
}
// p.json 的內容
{
"autoprefixer": {
"browsers": "> 5%"
}
} 接下來我們在終端里面輸入：
// 最簡潔的方式 postcss -c config.json // 稍微復雜一點的方式，這里要用 -i 參數，help里面沒有，我是從config.json里面的配置猜出來的，官方的那個寫法出不來 postcss -u autoprefixer -c p.json -i src/index.css -o index.css // 最復雜的方式 // 還是不寫比較好。。。
跟平時想到的效果一樣：
// src/index.css 中的源碼
`* {
transition: all .1s;
}`
// 轉換過后的代碼 index.css
`* {
-webkit-transition: all .1s;
transition: all .1s;
}` 好吧，現在肯定就對 PostCSS 有一個感官的認識了，接下來就是需要自己動手去用一下cssnext這個插件了～看會發生什么，這里就不寫了，也挺好用的，不過應該還是草案狀態。
我們開發不可能用命令行吧，所以這里再接著介紹代碼編寫，然后用 node 去執行文件的方式。直接上代碼吧。
// 1. 先安裝一下需要的庫
npm install postcss --save-dev
npm install autoprefixer --save-dev
// 2. 其實應該先看看 postcss 的 package.json 文件，來看看包含了些什么，留個印象
// 3. p.js 中的代碼
var postcss = require('postcss');
var autoprefixer = require('autoprefixer');
var fs = require('fs');
var css = '* { transition: all .1s; }';
postcss([autoprefixer])
.process(css)
.then(function(result) {
// 這一行是學習的時候需要的，看一下到底對象里面包含什么
console.log(result);
if (result.css) {
fs.writeFileSync('index.css', result.css);
}
if (result.map) {
fs.writeFileSync('index.css.map', result.map);
}
});
// 4. 執行 p.js
node p 好吧，最后的結果和之前用命令行的方式一樣，只不過過程不同。這樣下來應該對 PostCSS 有了更多的感覺了吧。還沒完，不用慌～我們還需要提出一個問題，我都有SASS等預處理器了，還拿它來不是又給前端屆添亂么？因為這2年東西確實太多了～
記住一句話：存在即合理
既然合理，那么我們就看看它有什么優勢唄～
3. 它解決我們的問題是為什么？優勢何在？
比如，我們用 SASS 來處理 box-shadow 的前綴，我們需要這樣寫：
/* CSS3 box-shadow */
@mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {
@if $inset {
-webkit-box-shadow: inset $top $left $blur $size $color;
box-shadow: inset $top $left $blur $size $color;
} @else {
-webkit-box-shadow: $top $left $blur $size $color;
box-shadow: $top $left $blur $size $color;
}
} 使用 PostCSS 我們只需要按標準的 CSS 來寫就行了，因為最后 autoprefixer 會幫我們做添加這個事情～
box-shadow: 0 0 3px 5px rgba(222, 222, 222, .3);
所以，這里就出現了一個經常大家說的未來編碼的問題。實際上，PostCSS 改變的是一種開發模式。
-
SASS等工具：源代碼 -> 生產環境 CSS
-
PostCSS：源代碼 -> 標準 CSS -> 生產環境 CSS
這樣能體會出優勢吧，但是目前大家都是 SASS + PostCSS 這樣的開發模式，其實我認為是不錯的，取長補短嘛，當然，在 PostCSS 平臺上都是可以做到的，只是目前這個過渡期，這樣更好，更工程化。接下來我就介紹一些方法來純粹是用 PostCSS。
4. 怎么實現與 SASS、LESS、Stylus 相同的功能
其實這一節我都不需要寫了～列一下插件就行了，因為插件才是實現，PostCSS 只是提供了一個平臺。
其實可以去官方看看： 插件系統
這里列幾個便于理解的插件
-
postcss-each
-
postcss-for
-
postcss-mixins
-
postcss-extend
從名字就能看出來了吧～應該很好理解。
5. 它由哪些東西組成？
其實從官方介紹來看，只包含以下內容：
-
CSS Parser
-
CSS 節點樹 API
-
source map 生成器
-
生成節點樹串
英文不太好 ＝＝ ，就這 4 部分吧，從第一個圖其實也能夠看出來。
其中的 I/O 體現在什么地方呢？好吧，很容易想到，主要體現在：
-
Input: 插件程式 和 CSS Parser
-
Output: 生成節點樹串
CSS Parser 可以理解為一個內部過程，而插件程式主要體現在：
postcss([ autoprefixer ])
最后生成的節點樹串體現在：
postcss().process().then(function (result) {
// 就是這里了
console.log(result.css);
});
// 現在我貼一下上面 result 對象的一個輸出結果
// 這里我多引入了一個 cssnano 插件
// 改變的代碼就這點，為了更全的看 result
var opts = {
from: 'src/index.css',
to: 'index.css',
// 配置 map
map: { inline: false }
};
postcss([ autoprefixer, cssnano() ]).process(css, opts)
Result {
processor: Processor {
// 處理器的版本號
version: '5.0.10',
// 加載的一堆插件
plugins: [
[Object], [Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object], [Object],
[Object], [Object]
]
},
messages: [],
root: Root {
raws: {
semicolon: false,
after: ''
},
type: 'root',
nodes: [
[Object]
],
source: {
input: [Object],
start: [Object]
},
_autoprefixerDisabled: false,
_autoprefixerPrefix: false,
rawCache: {
colon: ':',
indent: '',
beforeDecl: '',
beforeRule: '',
beforeOpen: '',
beforeClose: '',
beforeComment: '',
after: '',
emptyBody: '',
commentLeft: '',
commentRight: ''
}
},
// 我們代碼中配置 opts 變量
opts: {
from: 'src/index.css',
to: 'index.css'
},
// 這就是重新生成的 節點樹串
// 這里有自動補全和高效壓縮的效果
css: '*{-webkit-transition:all .1s;transition:all .1s}',
// map的文件的配置
map:
SourceMapGenerator {
_file: 'index.css',
_sourceRoot: null,
_skipValidation: false,
_sources: ArraySet { _array: [Object], _set: [Object] },
_names: ArraySet { _array: [], _set: {} },
_mappings: MappingList { _array: [Object], _sorted: true, _last: [Object] },
_sourcesContents: { '$src/index.css': '* { transition: all .1s; }' } },
// 這里應該是鏈式要用的吧，暫時不深究
lastPlugin: {
[Function]
postcssPlugin: 'cssnano-reset-stylecache',
postcssVersion: '5.0.10'
}
} 其實吧，這樣有點抽象的，還是來看熟悉的 API 吧。
這里出現了 sourcemap，說明 PostCSS 中的轉換功能是它必備的，但是必備并不等于： 源代碼與目標代碼不能完全一致 。
這里吐槽一下 Chrome 的 sourcemap 功能，一坨屎！下面看看 firefox 里面的效果吧。
這里 firefox 里面就自動映射了 源文件 ，非常不錯！
6. 既然是程序可以用的，那么它的API呢？
其實官方有 API 的詳細解釋，我看了一下，一看就明白了，就不再花時間介紹了，大家可以去看看，這樣會知道，原來如此～
PS: 大家可以先看看 Node Common 和 Node相關的，然后再看 plugin
這里看一個 DEMO，主要做 rem 和 px 單位之間的互換，加入 processors 就可以用了，很方便：
var custom = function(css, opts){
css.eachDecl(function(decl){
decl.value = decl.value.replace(/\d+rem/, function(str){
return 16 * parseFloat(str) + "px";
});
});
}; 開發插件可以看一下 官方插件指南
更細致的地方，之后有時間的時候再寫寫 ^_^ 一說技術就停不下來了～
大家在問？我怎么在工程上應用它呢？好吧，使用 gulp, grunt, webpack 都是可以的，我覺得都理解了 PostCSS ，使用這些就很簡單了，一查資料，拷貝一份配置就可以開始用了～就這樣吧，下次再結合 react 來介紹一下一個叫: postcss-js 的插件，看上去還不錯，還沒深入用，用到的時候再分享吧。
其實我也是初學者，只是用了自己的學習方法來梳理成文章，下面都是我看過的文章，部分是引用的。這里就不全部舉例了，看的文章有點多。。。