Postcss介绍

PostCSS不是类似Less，Sass，Stylus那样的CSS预处理器，而是一种允许用JS插件来转变样式的工具。看官网的截图：A tool for transforming CSS with JavaScript

PostCSS的插件很多，本篇先介绍3个常用插件：

• pre-css
• autoprefixer
• css-next

pre-css

pre-css插件是一款css预处理器。语法和主流的sass，stylus，less极其相似，例如同样用嵌套来表示层级，同样用&来表示父选择器等。也支持mixin，extends，条件@if，循环@each等。

具体语法请看github上的例子，如果有css预处理器开发经验，很容易上手，就不多介绍了。

autoprefixer

autoprefixer插件会给根据CanIUse的兼容性去检查你的CSS代码，然后自动为你的CSS代码加上浏览器厂商的私有前缀，一图胜千言：

例如你的CSS代码：

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.loading-circle {
  animation: rotate .4s linear infinite;
}

经autoprefixer插件处理后会，CSS代码里自动被添加了浏览器厂商的私有前缀：

@keyframes rotate {
  from {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

.loading-circle {
  -webkit-animation: rotate .4s linear infinite;
  animation: rotate .4s linear infinite;
}

这样程序猿可以专心写自己的代码了，按作者的说法就是可以：Write pPure CSS。

该插件也可以用browserlist来指定需要支持的浏览器和版本。不在browserlist列表里的浏览器和版本不会自动添加私有前缀。在package.json里添加browserlist列表：

{
  ...
  "browserslist": [
    "> 1%",     //全球有超过1%的人使用的浏览器
    "ie 9-10"   //虽然使用者低于1%，但仍旧支持一下
  ]
}

browserlist插件会查询CanIUse上的数据，返回支持的浏览器和版本。autoprefixer插件会给这些浏览器和版本加上私有前缀。例如上例中，ie8及以下就会被华丽地无视。（最后根据browserlist的一个小Demo，真心期待IE9也能早点退出历史舞台）

因为autoprefixer插件被集成进了css-next里，因此我们直接用css-next即可。（browserlist如有需求，还是要手动在package.json里配一下的）

css-next

css-next插件让能让你用上未来的css语法。这牛不是我吹的，见官网标语，有图有真相：

一图胜千言：变量用—双横线来声明。使用变量时要用var()将变量括起来，看上去有点像JS代码。还提供了不少API，如图中的color函数会将函数参数转成rgba格式。
更多（也不是很多）API见官网。前端工程师是幸福的，有这么多新的，好玩的技术供你尝试。前端工程师是痛苦的，稍一松懈就落伍了…

我所能理解的优秀的技术或工具，应该能解决现有条件下某些无法解决的痛点。但我能力有限，项目中尝鲜下来，暂时未发现css-next解决了什么其他预处理器如sass，less无法解决的痛点。感觉最大的好处是集成了autoprefixer插件。

webpack集成

将postcss用webpack集成进项目中：

const precss = require('precss');
const cssnext = require('postcss-cssnext');

module.exports = {
  ...
  postcss: [
    precss,
    cssnext
  ],
  module: {
    loaders: [
    ...
      {
        test: /\.[p]?css$/,
        loader: 'style!css!postcss'
      }
    ]
  },
  ...
};

由于css-next里自带autoprefixer插件，因此不必再手动配autoprefixer了。（而且试下来手动单独配autoprefixer的话，webpack会有重复配置的警告）