Postcss使用体验：在未来写CSS

接触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，top:center用于实现垂直居中，left:center用于实现水平居中：

.centered {
  top:center;
  left:center;
}

编译出来的CSS：

.centered{
  position: absolute;
  top: 50％;
  right: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

两段代码来自大漠老师教程

诸如此类，清除浮动，设置定位，设置水平，垂直间距，输出颜色代码等等等，都分别有postcss-clearfix，postcss-position，postcss-verthorz，postcss-color-short等插件可以实现，极大提升写代码效率。因为我还在学习中，这些东西我觉得还是先自己写明白了比较适合，所以只使用了postcss-size这个插件，就是使用后height和width可以同时写在同一行，我早就想这么做啦23333：

.img {
  size: 200px 200px;
}

编译后的CSS：

img {
  height: 200px;
  width: 200px;
}

三、类似Sass的语法

并不是说postcss有类似Sass的语法，而是因为postcss有cssnext插件，可以用未来使用的css语法，再转化为css现在浏览器支持的语法，而类似Sass中的mixin，extend，定义变量，函数等功能，未来的CSS语法也都有，只是与Sass有少许差异，而且如果你想用Sass，Less编写也可以，只要调整一下编译顺序，让编译Sass的命令在postcss命令之前即可。

总而言之，postcss上这么多插件，合理搭配使用可以极大地提高开发效率，我觉得既然未来的CSS语法已经摆在了你面前，就像ES6语法有了babel的支持一样，可以借助postcss而提前使用，那么为什么不早点使用迟早会成为标准的语法呢，我已经打算开始尝试结合gulp上的其他配置，开始学习“未来的CSS”，尝试postcss的使用，在未来写CSS，一起试试吧！