一般来说，介绍一个东西应该是按照它是什么，怎么用的顺序来的。我觉得这样大家很容易失去兴趣。首先我们来看看postcss能做什么。先说postcss能做什么完成css属性浏览器前缀手写代码可以是这样的：.div{display:flex;}postcss可以改成这样：.div{display:-webkit-box;显示：-ms-flexbox；display:flex;}检查css语法body{color:#f0;}会出现如下提示：src/er.css2:12?Unexpectedinvalidhexcolor"#f0"color-no-invalid-hex[18:27:28]'css-lint'eroredafter98ms[18:27:28]Errorinplugin'gulp-stylelint'Message:Failedwith1error拥抱下一个版本的css规范，即css4对于下一个标准css而言，变量和方法等功能将是添加。你可以像这样定义一个变量：:root{--red:#d33;}a{颜色：var(--red);}当然直接在已有的浏览器上是行不通的，就像es2015刚刚起步一样，我们需要一个转换器将其转换成目前可用的规范。postcss插件可以做到。a{color:#d33}除了上面的，还有很多其他的功能，可以通过postcss及其插件来提供。什么是postcss现在让我们回到最基本的问题，什么是postcss。引用官网的定义，atoolfortransformingCSSwithjs（AtoolfortransformingCSSwithJavaScript）。其实我们更多时候提到postcss的时候有两层意思：postcss本身，也就是我们npminstall的安装部分是基于postCss丰富的插件体系。以上功能都是基于postcss的插件提供的功能。Postcss本身并不直接用于处理样式，只有配合其插件才能完成相关的编译工作。postcss不能替代预编译语言。我想你脑子里一直在重现两个术语，less/sass。一开始，我也是这样。我以为postcss是和两者一样的css预编译语言或者起着类似的作用。的一种语言。postcss并不是要取代任何一个，而是提供一个补充，可以是一个互补的概念。作为一个利用js将css转成AST再进行处理的工具，它根本不能替代预处理语言。postcss必须处理css文件，所以可以和预编译语言结合。使用预编译语言转换成css后再进行处理。我一直认为，两者并不相互排斥，可以相辅相成。为什么需要postcss？你可能会有这样的疑问。由于两者并不冲突，所以我目前用less/sass可以轻松满足我的需求。为什么要用新东西。我觉得主要原因是它提供了丰富的插件功能，可以让工作变得更加简单方便。总之，你只需要写基本的css，其他功能交给postcss。简单比较一下可能会更清楚。实现给css属性添加浏览器前缀的功能。比较less和postcss的实现：1.对于less，必须要写一个方法。flex-block(){显示：-ms-flexbox；显示：-webkit-flex；display:flex;}.test{.flex-block()}2.使用postcss.test{display:flex;}编译时只需要使用autoprefixer。或许某个属性的效果不是特别明显。如果需要处理的属性很多怎么办？.flex-block(){display:-ms-flexbox;显示：-webkit-flex；display:flex;}.transform(){//举个例子}.ccc(){}.test{.flex-block().transform().ccc()}这时候postcss还是只需要下面的:.test{显示：flex;transform:rotate(7deg);}这个时候就可以看出postcss的方便了。我一直认为，对于可以抽象和公开的东西，没有必要重复手工开发。postcss的工作原理postcss本身是一个node模块，可以将css文件解析成抽象语法树（AST），在多个插件方法中传递树，然后将AST转换成字符串返回，可以输出到目标文件中间。插件在交付过程中可以选择是否更改语法树，上诉更改可以通过sourcemap记录。如下流程所示（借用了一张w3cplus的图）：功能：将未来规范转换为当前规范的escaper同理，将源文件解析成AST，再由插件处理。丰富的插件满足不同的需求支持自定义插件的开发在现在的工作流程中引入postcss你可能会有这样的想法，它是一个新的工具，是不是有必要在我现在的开发框架上做一个大动作。其实，这种担心是大可不必的。postcss很容易引入您当前的工作流程。不管是webpack还是gulp，都有更方便的方式。官方有详细的介绍文档。结语以前很早就看postCss了。那时我太小，认为它是less的替代品，所以一直没有关注它。了解之后，感觉真??的很好。至于怎么用，这里就不演示了。有兴趣的可以看看我的简单例子，希望更多的人使用。参考文章http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/http://julian.io/some-things-you-may-think-about-postcss-and-你可能错了/
