具体解读CSS的预编译器PostCSS

提到css预编译器（css preprocessor），你能够想到Sass、Less和Stylus。而本文要先容的PostCSS，恰是一个如许的东西：css预编译器能够做到的事，它一样能够做到。

“你说的我都懂，那为甚么要用它？”

套装与单件

若是Sass等预编译器是新界说了一种模板说话，而后将其转化为css的话，PostCSS则是更纯洁地对css本身做转换。

回忆一下你是若何进修利用css预编译器的：领会到有如许一种能够转化为css的说话，它有良多特征，变量、嵌套、担当等等，每种特征都经由进程必然语法完成。大要就像是递给你一个已封装好的东西箱（量产型？），你能够在外面找有效的东西。

那PostCSS是若何呢？PostCSS就像只递给你一个盒子，但告知你你能够从中间的摆设柜取走本身想要的东西放进盒子打包带走。若是你感触感染摆设柜里的不够好，PostCSS还能够帮你打造你本身的东西。以是，利用PostCSS，你能够仅取所需。

这便是PostCSS的模块化（modular）气概。它作为一个css转换东西，本身很小，其一切的转换功效都是插件，是以能够特征化设置装备摆设。

PostCSS的扼要道理

PostCSS本身只包罗css阐发器，css节点树API，source map天生器和css节点树拼接器。

css的构成单元是一条一条的款式法则（rule），每条款式法则又包罗一个或多个属性&值的界说。以是，PostCSS的履行进程是，先css阐发器读取css字符内容，获得一个完整的节点树，接上去，对该节点树停止一系列转换操纵（基于节点树API的插件），最初，由css节点树拼接器将转换后的节点树从头构成css字符。时代可天生source map标明转换前后的字符对应干系：

比拟成心思的是，PostCSS的插件实在都是JavaScript函数，它们利用PostCSS的节点树API，对css节点树停止差别的转换。

插件预览

一切插件都能够在PostCSS的主页中查问到，这里只拔取一小局部表示一下。
Autoprefixer

PostCSS最着名的插件是Autoprefixer。如名所示，能够主动为你增添阅读器公有前缀。它的增添值会参考Can I Use及你设定的阅读器撑持规模，是以相称靠得住。上面是一个示例（以我设定的阅读器撑持规模）：

1. .container{   
2.     display: flex;   
3. }  

编译后：

1. .container{   
2.     display: -webkit-box;   
3.     display: -webkit-flex;   
4.     display: -ms-flexbox;   
5.     display: flex;   
6. }  

postcss-nested&postcss-mixins

在刚起头利用PostCSS时，我就想到要用PostCSS完成我在Sass中最经常利用的特征。以是，我找到了postcss-nested和postcss-mixins。将它们连系起来后，就能够做到如许：

1. @define-mixin clearfix{   
2.     &:after{   
3.         display: table;   
4.         clear: both;   
5.         content: " ";   
6.     }   
7. }   
8.   
9. .column-container{   
10.     color: #333;   
11.     @mixin clearfix;   
12. }  

编译后：

1. .column-container{   
2.     color: #333;   
3. }   
4.   
5. .column-container:after{   
6.     display: table;   
7.     clear: both;   
8.     content: " ";   
9. }  

到这里，你是不是已有了“预编译器能够做到的它也能够做到”的感触感染呢？
若何利用PostCSS

我小我保举连系Gulp利用，本文在此只先容gulp-postcss的用法。

gulp-postcss及插件都是npm，起首，利用npm install将它们别离装置到名目目次中（会位于node_modules）。而后，编辑glupfile.js，将PostCSS注册为Gulp的一个使命。以下是一个连系利用了Autoprefixer、postcss-simple-vars、postcss-mixins、postcss-nested4个插件，且天生source map文件的例子：

1. var gulp = require("gulp");   
2. var postcss = require("gulp-postcss");   
3. var autoprefixer = require("autoprefixer-core");   
4. var postcssSimpleVars = require("postcss-simple-vars");   
5. var postcssMixins = require("postcss-mixins");   
6. var postcssNested = require("postcss-nested");   
7. var sourcemaps = require("gulp-sourcemaps");   
8.   
9. // Css process.   
10. gulp.task("postcss", function(){   
11.     var processors = [   
12.         postcssMixins,   
13.         postcssSimpleVars,   
14.         postcssNested,   
15.         autoprefixer({   
16.             browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]   
17.         })];   
18.   
19.     return gulp.src(["./stylesheets/src/*.css"])   
20.         .pipe(sourcemaps.init())   
21.         .pipe(postcss(processors))   
22.         .pipe(sourcemaps.write("."))   
23.         .pipe(gulp.dest("./stylesheets/dest"));   
24. });  

在上面这段代码中，processors是一个数组，界说了用到的PostCSS插件。PostCSS会按照界说挨次顺次履行插件，是以，在连系多个插件利用时，请注重它们的地位。
自界说转换

另外，你能够很轻易地建立你本身的转换（还记得后面说过PostCSS的插件都是JavaScript函数吧？）。比方，上面是一个自界说的转换体例，它将css代码中的带有rem单元的值，变动为px的值。

1. var custom = function(css, opts){   
2.     css.eachDecl(function(decl){   
3.         decl.value = decl.value.replace(/d+rem/, function(str){   
4.             return 16 * parseFloat(str) + "px";   
5.         });   
6.     });   
7. };  

而后，你将这个体例间接增添到processors中（就像postcssMixins那些那样）就能够利用。若是本来有值是3rem，将变成48px。

以上只是一个简略的转换，若是要正式做一个插件，请参考PostCSS插件指南。
机能

PostCSS传播鼓吹，由JavaScript编写的PostCSS比C++编写的libsass（Sass本来是Ruby编写的，但厥后出了C++的引擎，也便是libsass，它更快）还要快3倍。这里的具体数字我感触感染不必多关怀，能够感触感染到“PostCSS的运转速率很快”就充足了。

现实运转起来大要如许：

做到更多

基于PostCSS，能够做到良多现有的css预编译器做不到的事。比方，插件系列cssnext能够让你利用CSS4+的语法（增添了变量等良多特征），它会帮你转化为今朝可用的CSS3。
一点题目

PostCSS有一个题目，那便是它是零星的，以是我没法找到一个编辑器能准确地剖析并高亮筹办利用PostCSS的css代码。比方在WebStorm中我把它当作通俗的css文件，成果就会收到良多白色的毛病提醒。
以是，css预编译器过期了吗？

固然不会。就像其余风行的框架和东西那样，css预编译器是已考证过的可用东西，咱们完整能够按照须要选用。

Sass等css预编译器的特色是成熟靠得住。一方面，它们已是风行的模板说话，有完美的文档和周边撑持，绝对不变，新插手团队的人也能比拟轻易地懂得。另外一方面，集成的气概有它的便利的地方，就像你能够会懒得去组装一个模子，但能找到专业的人替你完成。

PostCSS的特色则是模块化。从久远来看，PostCSS能够做到更多范例的css转换。而可定制的气概很是合适寻求特征的人（更疾速，并且能够本身做出很风趣的插件）。

另外，css预编译器和PostCSS能够协同利用。有一个风行的用法便是Sass编译后再接PostCSS的Autoprefixer（究竟结果这是PostCSS的招牌插件）。
结语

PostCSS的气概能够说是在打造一个转变css开辟体例的生态体系。以是若是说到将来，仍是挺等候的。