接触Postcss的起因是在用Npm安装模块的时候看到的提示语句，一番接触后发现：我以后可能不需要写Sass了。
今天用Npm安装模块的时候出现了一段提示语句：
其实我现在也不知道这句是什么意思，已经在Segmentfault上提问，以后会更新补充。我自己的推测是“gulp-autoprefixer”插件可以用Postcss这个插件替代，于是我百度了一下这个是个什么东西，看到了SF上@小撸发的这篇PostCSS 是个什么鬼东西？，大致了解了一下Postcss是一个平台，上面有各种插件用来处理CSS，不过里面讲的东西，我觉得没必要用得这么麻烦。
重点是他推荐的大漠老师POSTCSS深入学习,进了这个指引，你对Postcss的理解，最重要使用就能非常清晰了。
说说我对Postcss的误解，一开始我以为它是像Sass、Less一样的预处理器，心想又要去学一种预处理器吗？后来又发现它竟然还有autoprefixer（自动添加浏览器前缀），压缩代码等功能，后来又觉得，这些功能能做的，gulp也能做，那我还要Postcss干嘛？
通过学习后发现，它就是gulp+Sass的结合版，最重要的是一下几点：
一、清晰、简短的配置##
只要你引入了Npm中各种“postcss-”前缀的插件，只要你不是很想特别定制，只要在处理css的‘gulp’的'task'中给一个数组，写进你要添加的处理模块，gulp就能编译出CSS代码，相比gulp的插件，要写一个个方法，一些方法的配置还要去查文档，Postcss的配置简直简单到“引入即用”的感觉。
这个就是我gulpfile.js中Postcss部分的配置：
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer'); //自动添加前缀
var opacity = require('postcss-opacity'); //opacity属性的降级处理
var pseudoelements = require('postcss-pseudoelements'); //让IE8支持::的伪元素
var vmin = require('postcss-vmin'); //为IE9支持viewport相对单位vmin
var pixrem = require('pixrem'); //给rem添加px作为降级处理为IE8
var will_change = require('postcss-will-change'); //为will-change属性添加回退
var cssnext = require('cssnext'); //写未来的CSS
var precss = require('precss'); //用函数的方法写CSS
var color_rgba_fallback = require('postcss-color-rgba-fallback'); //给rgba()提供降级方案为IE8
var atImport = require('postcss-import'); //可以使用@import引入其他CSS文件，减少Http请求
var mqpacker = require('css-mqpacker'); //合并媒体查询
var size = require('postcss-size'); //CSS中一个size属性同时写height和width
gulp.task('css', function () {
//will_change必须在autoprefixer之前
var processors = [
will_change, autoprefixer, cssnext,color_rgba_fallback, opacity, pseudoelements, vmin, pixrem,precss,atImport,mqpacker,size
];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
可以看到除了长长的引用模块外，想要使用Postcss中的插件，只需要在processors数组中添加你要使用的模块，用pipe()处理即可。
二、极大减少CSS书写量##
如果你已经厌倦了一次次地写重复的垂直居中、水平居中，Postcss中，有postcss-center帮你搞定，只要你引入了postcss-center，<code>top:center</code>用于实现垂直居中，<code>left:center</code>用于实现水平居中：
.centered {
top:center;
left:center;
}
编译出来的CSS：
.centered{
position: absolute;
top: 50％;
right: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<small><small>两段代码来自大漠老师教程</small></small>
诸如此类，清除浮动，设置定位，设置水平，垂直间距，输出颜色代码等等等，都分别有postcss-clearfix，postcss-position，postcss-verthorz，postcss-color-short等插件可以实现，极大提升写代码效率。因为我还在学习中，这些东西我觉得还是先自己写明白了比较适合，所以只使用了postcss-size这个插件，就是使用后height和width可以同时写在同一行，我早就想这么做啦23333：
.img {
size: 200px 200px;
}
编译后的CSS：
img {
height: 200px;
width: 200px;
}
<h3>三、类似Sass的语法</h3>
并不是说postcss有类似Sass的语法，而是因为postcss有cssnext插件，可以用未来使用的css语法，再转化为css现在浏览器支持的语法，而类似Sass中的mixin，extend，定义变量，函数等功能，未来的CSS语法也都有，只是与Sass有少许差异，而且如果你想用Sass，Less编写也可以，只要调整一下编译顺序，让编译Sass的命令在postcss命令之前即可。
</br></br>
总而言之，postcss上这么多插件，合理搭配使用可以极大地提高开发效率，我觉得既然未来的CSS语法已经摆在了你面前，就像ES6语法有了babel的支持一样，可以借助postcss而提前使用，那么为什么不早点使用迟早会成为标准的语法呢，我已经打算开始尝试结合gulp上的其他配置，开始学习“未来的CSS”，尝试postcss的使用，在未来写CSS，一起试试吧！
