前言
postcss is a tool for transforming styles with js plugins. these plugins can lint your css, support variables and mixins, transpile future css syntax, inline images, and more.
postcss是一个基于js插件的转换样式的工具。postcss插件可以像预处理器，它们可以优化和autoprefix代码；可以添加未来语法；可以添加变量和逻辑；可以提供完整的网格系统；可以提供编码的快捷方式......还有很多很多。
postcss不是 尽管表面上它看起来是一个预处理器，其实它不是一个预处理器
尽管表面上它看起来是一个后处理器，其实它也不是一个后处理器
尽管它可以促进、支持未来的语法，其实它不是未来语法
尽管它可以提供清理、优化代码这样的功能，其实它不是清理、优化代码的工具
它不是任何一件事情，这也意味者它潜力无限，你可以根据自己的需要配置你需要的功能
postcss的优点 多样化的功能插件，创建了一个生态的插件系统
根据你需要的特性进行模块化
快速编译
创建自己的插件，且具可访问性
可以像普通的css一样使用它
不依赖于任何预处理器就具备创建一个库的能力
可以与许多流行工具构建无缝部署
webpack设置
现在大多数同事使用的还都是gulp，大漠老师写过gulp设置的文章，很详细，我就不复制粘贴了。传送门在这：(postcss深入学习：gulp设置)[ http://www.w3cplus.com/postcss/postcss-q...。
我这边讲解下webpack的基本配置(我们默认你已经了解npm包等知识...github原址: postcss for webpack)
首先
npm install postcss-loader --save-dev
在webpack配置文件中设置 postcss
var precss = require('precss');var autoprefixer = require('autoprefixer');module.exports = { module: { loaders: [ { test: /\.css$/, loader: style-loader!css-loader!postcss-loader } ] }, postcss: function () { return [precss, autoprefixer]; }}
你需要安装两个插件来实现这个例子
npm install precss --save-dev npm install autoprefixer --save-dev
postcss插件 postcss的核心就是它的插件系统。如何选择postcss的插件，这一切取决于你的心情。
查找插件 postcss在github上有一个 插件仓库，其主页维护了插件列表。这个插件列表会经常更新，所以说这个地方是一个相当可靠的地方，可以看到插件的发展，在哪方面可用。
postcss twitter 你也可以关注postcss的twitter账号。 @postcss。每有新插件发布。twitter上就会发布，所以你只需关注这个账号就可以发现。
几款让你用上就离不开的插件 以下介绍几款本农正在使用的几款插件
precss npm install precss --save-dev
precss语法和sass极其相似，你可以毫不费力的使用它。
嵌套 precss中的嵌套同sass或less中的实现方法一样，都是通过在选择器的大括号内嵌套选择器。例如:
.menu { width: 100%; a { text-decoration: none; } &::before { content: ''; }}
变量 在precss中保持了类似sass声明变量的语法，在$符号后面紧跟变量名，然后变量名后面有冒号:，其后再是变量值。
$text_color: #232323;body { color: $text_color;}
条件 在precss中也有条件命令这样的特性，其语法和sass的相同，也是使用@if和@else；例如：
$column_layout: 2;.column { @if $column_layout == 2 { width: 50%; float: left; } @else { width: 100%; }}
imports 通过@import可以将多个css文件合并成一个。例如：
import 'normalize.css';
小结 作为postcss中强大的预处理器precss插件包，它有很多特点：
precss中的嵌套和sass或less中的嵌套一样
precss声明变量像sass的语法
在precss中也有@if和@else这样的条件命令的功能特性
@for和@each循环是有效的
在precss中使用@define-mixin mixin_name $arg1,$arg2{...}语法来声明
在precss中使用@mixin mixin_name pass_arg1, pass_arg2;语法来调用
@mixin-content使用方法类似于sass中的@content
precss中使用@define-extend extend_name{...}来声明可扩展的代码块
precss中使用@extend extend_name语法来调用声明的代码扩展块
在precss可以使用@import中导入css文件
autoprefixer npm install autoprefixer --save-dev
在我们使用sass的时候我们会经常使用compass库中使用 @include box-sizing(border-box);来解决 box-sizing属性在各浏览器私有前缀的问题。但它本身存在一些问题：
要知道属性需要的前缀，然后才能决定如何部署混合宏
必须知道混合宏的名称和如何调用混合宏
必须时刻关注浏览器对每个属性的私有前缀变化（比如，box-sizing现在就不再需要前缀）
当我们使用autoprefixer的时候发现这些都不是问题，它可以根据caniuse.com数据对属性自动添加浏览器的私有前缀。书写没有私有前缀的css(实际上是忘了写...)
:fullscreen a { display: flex}
autoprefixer会根据当前不同浏览器支持的特性来为你添加前缀，编译后的代码：
:-webkit-full-screen a { display: -webkit-box; display: -webkit-flex; display: flex}:-moz-full-screen a { display: flex}:-ms-fullscreen a { display: -ms-flexbox; display: flex}:fullscreen a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex}
更多关于autoprefixer的信息可以异步传送门： autoprefixer的github地址
cssnano 它提供了一个非常强大的css优化的插件包cssnano，这个插件包是一个可以即插即用的。它汇集了大约25个插件，只需要执行一个命令，就可以做多方面不同类型的优化。它包括：
删除空格和最后一个分号
删除注释
优化字体权重
丢弃重复的样式规则
优化calc()
压缩选择器
减少手写属性
合并规则
提供个官网的例子
h1::before, h1:before { margin: 10px 20px 10px 20px; color: #ff0000; -webkit-border-radius: 16px; border-radius: 16px; font-weight: normal; font-weight: normal;}/* invalid placement */@charset utf-8;
编译后
@charset utf-8;h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}
更多特性和功能可以一步官网查看。官网传送门： cssnano.co
sass和postcss 如果你对postcss的各种特性很感兴趣，但又不想放弃熟练使用的sass。不用担心，你可以完全把sass与postcss结合使用.因为你已经使用了node.js来运行gulp或webpack和postcss.所以使用sass最简单的方法就是使用libsass。你只需要安装node-sass.
npm install node-sass --save-dev
然后只需要在配置文件中先对.scss文件进行处理后再用postcss进行处理。
小结 当我使用了一次postcss后我就深深的爱上了它，我相信你也会有这种感觉。这篇文章只是简单的介绍了一下postcss，推荐大漠老师的文章： 大漠老师postcss；