postcss那些事儿

一、sass和postcss
sass、less、stylus，三者是css预处理器，使用预编码来处理css，然后编译成线上需要的css。
postcss是处理你写好的css，让你的css更健康，对浏览器更友好。
所以sass和postcss是两码事儿，彼此都有独一无二的地位，不能互相取代，实际开发过程中，推荐sass+postcss，前者生成css，后者生成更好的css。当然，随着postcss插件的增多，sass能做的事，postcss插件也可以办到，因此独立使用postcss进行开发是今后的趋势，它是css界的babel。

二、postcss的优势
1、可以像使用css一样使用postcss；
postcss和sass不同，它不用建立其他后缀名的文件，postcss从始至终的操作对象都是css文件，所以在学习postcss的时候，你可以暂时失忆，忘了sass。如果你没学过sass，less，只懂原生css，这丝毫不影响你学习postcss，从某种角度来说，反而是好事。
2、postcss速度很快，测试嵌套，变量，计算得出如下数据；

postcss: 36 ms
Rework: 77 ms (2.1 times slower)
libsass: 136 ms (3.8 times slower)
Less: 160 ms (4.4 times slower)
Stylus: 167 ms (4.6 times slower)
Stylecow: 208 ms (5.7 times slower)
Ruby Sass: 1084 ms (30.1 times slower)

3、插件系统提供不同的功能；
比如postcss的招牌插件autoprefixer，给css3属性加前缀；再如cssnano，压缩优化css；或者cssnext，让你提前使用未来css语法；或者小功能插件，比如画圆，画三角形，清除浮动，定位，居中；或者处理跨浏览器兼容性的样式，特别是如何对IE老版本做降级处理，postcss-color-rgba-fallback，postcss-will-change；或者网格系统lost插件。Google在2012年停止了对IE8的支持，而且在2013年对IE9的支持也慢慢在降低。微软公司2016年也不再支持IE8。Bootstrap4最近也不支持IE8。

其实有些地方，sublime中的插件已经实现，而且很好用，我觉得就不需要postcss插件了，或者自己多写两行代码即可，不必引入postcss插件。我个人不太喜欢过多依赖插件和工具，尤其是为了一点代码和功能引入插件，有点小题大做。哈哈，要知道，武林高手不应该被武器所左右，空手道依然可以降服千军万马。

4、可以创建自己的插件；
5、可以定制自己的预处理器；
6、粒子化，模块化。

三、postcss简介6.0.x
postcss起源于2013年9月，它把css解析为抽象语法树，再经过postcss插件的处理，输出代码字符串，生成新的css。
postcss本身很小，其只包含css解析器，操作css节点树的API，资源生成器（source map），以及一个节点树字符串化工具，所有的黑魔法都是通过利用插件实现的，postcss的插件都是使用JavaScript写的，每个postcss插件都是一个NodeJS的模块。
在学习postcss之前，有个疑问，postcss中的autoprefixer插件和sublime中的autoprefixer插件作用一样吧，都是在一些css属性前加浏览器前缀。前者看上去是一个自动化，只要安装后，在代码中引入插件即可。后者是编辑器中的插件，属于手动操作，写css的时候，按下对应快捷键即可。
我还有个疑问，webpack中的插件也可以做代码压缩优化，我们是用postcss的插件，还是用webpack的插件？sublime里面也有插件，babel里面也有很多插件，这么多选择，按照自己的需求和爱好来吧。

四、postcss运行方式

1、命令行postcss-cli
2、在webpack构建中运行

3、在线编译
A、在codepen注册账号；
B、新建一个pen，然后设置css为postcss语法；

C、在css面板添加依赖插件；

D、开始写代码，html，css，js。

E、在预览区查看效果。