详尽讲解CSS的预编译程序器PostCSS

提到css预编译程序器（css preprocessor），你将会想起Sass、Less和Stylus。而本文要详细介绍的PostCSS，更是1个这样的专用工具：css预编译程序器能够保证的事，它一样能够保证。

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

套装与散件

假如Sass等预编译程序器是新界定了1种模版語言，随后将其转换为css的话，PostCSS则是更纯碎地对css自身做变换。

回想1下你是怎样学习培训应用css预编译程序器的：掌握到有这样1种能够转换为css的語言，它有许多特点，自变量、嵌套循环、承继这些，每种特点都根据1定英语的语法完成。大约就好像递给你1个早已封裝好的专用工具箱（量产型？），你能够在里边找有效的物品。

那PostCSS是如何呢？PostCSS就像只递给你1个盒子，但告知你你能够从周围的陈列设计柜取走自身要想的专用工具放进盒子装包带走。假如你感觉陈列设计柜里的不足好，PostCSS还能够帮你打造你自身的专用工具。因此，应用PostCSS，你能够仅取所需。

这便是PostCSS的控制模块化（modular）设计风格。它做为1个css变换专用工具，本身很小，其全部的变换作用全是软件，因而能够个性化化配备。

PostCSS的扼要基本原理

PostCSS本身只包含css剖析器，css连接点树API，source map转化成器和css连接点树拼接器。

css的构成模块是1条1条的款式标准（rule），每条款式标准又包括1个或好几个特性&值的界定。因此，PostCSS的实行全过程是，先css剖析器载入css标识符內容，获得1个详细的连接点树，接下来，对该连接点树开展1系列变换实际操作（根据连接点树API的软件），最终，由css连接点树拼接器将变换后的连接点树再次构成css标识符。期内可转化成source map说明变换前后左右的标识符对应关联：

较为成心思的是，PostCSS的软件实际上全是JavaScript涵数，它们应用PostCSS的连接点树API，对css连接点树开展不一样的变换。

软件预览

全部软件都可以以在PostCSS的首页中查寻到，这里只选择1小一部分示意1下。
Autoprefixer

PostCSS最着名的软件是Autoprefixer。如名所示，能够全自动为你加上访问器独享前缀。它的加上值会参照Can I Use及你设置的访问器适用范畴，因而非常靠谱。下面是1个示例（以我设置的访问器适用范畴）：

编译程序后：

postcss-nested&postcss-mixins

在一开始应用PostCSS时，我就想起要用PostCSS完成我在Sass中最常见的特点。因此，我寻找了postcss-nested和postcss-mixins。将它们融合起来后，便可以保证这样：

编译程序后：

到这里，你是不是早已有了“预编译程序器能够保证的它还可以保证”的觉得呢？
怎样应用PostCSS

我本人强烈推荐融合Gulp应用，本文在此只详细介绍gulp-postcss的用法。

gulp-postcss及软件全是npm，最先，应用npm install将它们各自安裝到新项目文件目录中（会坐落于node_modules）。随后，编写glupfile.js，将PostCSS申请注册为Gulp的1个每日任务。下列是1个融合应用了Autoprefixer、postcss-simple-vars、postcss-mixins、postcss-nested4个软件，且转化成source map文档的事例：

在上面这段编码中，processors是1个数字能量数组，界定了用到的PostCSS软件。PostCSS会依照界定次序先后实行软件，因而，在融合好几个软件应用时，请留意它们的部位。
自定变换

另外，你能够很非常容易地建立你自身的变换（还记得前面说过PostCSS的软件全是JavaScript涵数吧？）。比如，下面是1个自定的变换方式，它将css编码中的带有rem企业的值，变更为px的值。

随后，你将这个方式立即加上到processors中（就像postcssMixins那些那样）便可以应用。假如原先有值是3rem，将变为48px。

以上只是1个简易的变换，假如要宣布做1个软件，请参照PostCSS软件指南。
特性

PostCSS声称，由JavaScript撰写的PostCSS比C++撰写的libsass（Sass本来是Ruby撰写的，但后来出了C++的模块，也便是libsass，它更快）还要快3倍。这里的实际数据我感觉无需多关注，能够体会到“PostCSS的运作速率很快”就充足了。

具体运作起来大约这样：

保证更多

根据PostCSS，能够保证很多现有的css预编译程序器做不到的事。比如，软件系列cssnext可让你应用CSS4+的英语的语法（提升了自变量等很多特点），它会帮你转换为现阶段能用的CSS3。
1点难题

PostCSS有1个难题，那便是它是零散的，因此我没法寻找1个编写器能正确地分析并高亮度提前准备应用PostCSS的css编码。比如在WebStorm中我把它作为一般的css文档，結果就会收到许多鲜红色的不正确提醒。
因此，css预编译程序器落伍了吗？

自然不容易。就像别的时兴的架构和专用工具那样，css预编译程序器是早已认证过的能用专用工具，大家彻底能够依据必须采用。

Sass等css预编译程序器的特性是完善靠谱。1层面，它们早已是时兴的模版語言，有健全的文本文档和附近适用，相对性平稳，新添加精英团队的人也能较为非常容易自然地理解。另外一层面，集成化的设计风格有它的便捷的地方，就像你将会会懒得去拼装1个实体模型，但能寻找技术专业的人替你进行。

PostCSS的特性则是控制模块化。从长久看来，PostCSS能够保证更多种类的css变换。而可订制的设计风格十分合适追求完美个性化的人（更便捷，并且能够自身做出很趣味的软件）。

另外，css预编译程序器和PostCSS能够协作应用。有1个时兴的用法便是Sass编译程序后再接PostCSS的Autoprefixer（终究这是PostCSS的招牌软件）。
结语

PostCSS的设计风格能够说是在打造1个更改css开发设计方法的绿色生态系统软件。因此假如说到将来，還是挺希望的。