css的发展与所有语言的发展一样，都有一个迭代的过程。伴随着每一个主要版本的发布，我们都可以获得新的特性和语法帮忙我们更好的完成样式。css3 介绍了很多新的特性，可以让我们设计交互，之前我们都是通过javascript来实现交互。每一天都会有新工具出现，让我们可以更灵活地表达样式。
postcss就是最近才出现的这么一个工具 postcss。postcss的目标是通过自定义插件和工具这样的生态系统来改造css。与sass和less这些预编译器相同的原则，postcss把扩展的语法和特性转换成现代的浏览器友好的css。
如何实现？javascript。
javascript转换我们的样式比其他处理器快。使用gulp或grunt的task-runner工具，我们可以通过构建过程转换样式，就像sass和less的编译。像react和angularjs这样的库和框架，允许我们可以在javascript中直接写css，为我们的样式打开了一扇使用javascript转换的大门。
postcss的历史 postcss作为使用javascript处理css的方法被推出，它的开发者是 andrey sitnik, autoperfixer的作者。postcss本身只是一个api，当使用其庞大的插件生态系统时，可以为我们提供强大的处理能力。生成的source maps可以方便我们的调试，抽象语法树（ast）的存在可以帮忙我们理解代码是如何被转换的。
由于postcss使用node.js框架，无论语言还是工具可以按需修改和定制。其他工具如sass和less就会因为系统能力的限制，只可以使用编译器可用的方法。
由于其使用的api，postcss允许我们为可能需要的任何功能，创建自定义的插件和工具。模块化平台的设计使得工具中立，使得我们只需要关注项目需要的功能。postcss对语言格式不关心，接受不同预处理器的语法风格，像sass和less，如果有必要的话。
模块化的好处 大多数开发人员很少从头开始一个项目。很多都是以sass模板开始，在指定项目中使用sass模板提供的variables，mixins，functions。我们为functions,mixins,表格系统，通用工具提代独立的样式表，从而使开发更容易。到了最后，我们最终会有10个或更多个样式文件用来保证开发的条理性。
维护sass或less片断的库是一个艰巨的任务，会留下一下臃肿的项目。很多项目中没有用到mixins和funcitons，只是做为以防万一的代码包含进来。postcss很容易安装，即插即用的模块，使有独特需求的项目开发过程更灵活。
postcss把我们产品中的样式表中用来创建funtions,utities和mixins的代码移出来包装成插件。现在对于每个项目，我们可以通过构建工具中包含对应插件就可以使用这些工具。
postcss fontpath插件就可以见证这种方式的优势。在使用sass时，我们可以在文件中包含进一个mixin来自定义网页字体，因此我们创建了一个@font-face的标签。
@mixin importfont($font-family,$font-filename,$font-weight:normal,$font-style:normal,$font-stretch:normal){ @font-face{ font-family:'#{$font-family}'; src:url('#{font-filename}.eot'); src:url('#{font-filename}.woff') format('woff'), url('#{$font-filename}.ttf') format('truetype'); font-weight:$font-weight; font-style:$font-style; font-stretch:$font-stretch; }} @include importfont('mission script','fonts/mission-script-webfont',300);
在我们的项目中使用 postcss fontpath插件，我们就不再需要像上面那样包含sass mixins了。在我们的css中写入下面的代码，postcss会通过grunt或gulp把它转换成我们需要的。
@font-face{ font-family:'my font'; font-path:'/path/to/font/file'; font-weight:normal; font-style:normal; }
在写这篇文章时，postcss已经有超过100个社区插件，允许诸如未来的css语法，快捷键，工具和语言的扩展。postcss除了是一个'酷'的工具，它的用户群里也有wordpress,谷歌和推特团队这些重量级的用户。
添加postcss到你的工作流 因为postcss是用javascript编写的，我们可以在项目中使用像 gulp和 grunt这样的task runner来转换css。下面的教程演示如何把postcss使用gulp或grunt合并到你的工作流。使用这两种工具不是至关重要的，这只是个人喜好或哪一个更合适项目的问题。
注意：gulp和grunt完整版的工具放在 github可用。你可以随时使用它做为初始模板，并且可以根据需要扩展它。
使用gulp设置postcss 如果你对gulp不熟悉，我推荐你阅读callum macrae写的 基于gulp构建做个初步了解，并把这个工具跑起来。
在终端执行 npm i gulp-postcss -d命令，在你的项目中安装postcss模块。
在项目下的 gulpfile.js中请求我们安装的postcss模块，然后在任务中使用它。在这里，一定要更新开发文件的路径和输出转换文件的目录。
var postcss = require('gulp-postcss');gulp.task('styles',function(){ return gulp.src('path/to/dev/style.css') .pipe(postcss([])) .pipe(gulp.dest('path/to/prod')) });
在命令行输入 gulp styles执行该任务。
使用grunt设置postcss 注意：如果你对grunt不熟悉，我推荐你通过阅读mike cunsolo写的 grunt入门和实践来熟悉grunt的使用。
在终端执行 npm i grunt-postcss -d命令，在你的项目中安装postcss模块。
一旦在系统里安装了该插件，你就可以像下面这样，使用它在gruntfile里创建一个任务了。一定记得更新 cwd和 dest的值来反映你的应用程序结构。
module.exports = function(grunt){ grunt.initconfig({ pkg:grunt.file.readjson('package.json'), styles:{ options:{ processors:[] }, dist:{ files:[{ expand:true, cwd:'dev/', src:['**/*.css'], dest:'prod/' }] } } }); // 加载post-css grunt.loadnpmtasks(grunt-postcss); };
在命令行输入 grunt styles执行该任务。
安装插件 使用postcss自己并不完全是强大的，它的强大依赖于插件。你可能已经注意到在上面gulp和grunt的实现中，任务声明中有空的数组。在这些数组中我们可以引入社区开发的postcss插件。
核准的postcss插件列表可以在 postcss github页查看，这些插件像所有的npm包一样，可以通过命令行安装。许多插件只能做为postcss的扩展，对于你使用的构建工具是不可知的。比如，我们将要安装的 postcss focus插件,它将为每一个hover状态添加 :focus。
下面例子中使用的所有插件，我们需要使用命令行和npm在我们的项目中安装这些包文件。
postcss插件安装示例 npm i postcss-focus -d
插件可以直接传递到方法；然而，为了代码的整洁，我们可以构造一个数组作为参数将其传递给方法。在这个数组里，我们包含必要的 require语句，该语句返回插件，接着立即调用返回的插件。如果你想深入了解这个概念，推荐阅读ryan christiani写的 functions as first-class citizens in javascript这篇文章。
require('postcss-focus')()
grunt使用新创建的 processorarray后的代码，如下：
var processorarray = [ require('postcss-plugin')() ]; // snipped for brevity styles:{ options:{ processors:processorarray }, dist:{ src:'path/to/dev/style.css', dest:'path/to/prod/style.css' } }
gulp修改后的代码如下：
var processorarray = [ require('postcss-plugin')() ]; gulp.task('styles',function(){ gulp.src('path/to/dev/style.css') .pipe(postcss(processorarray)) .pipe(gulp.dest('path/to/prod')) });
插件 一旦我们安装一个插件和构建工具准备编译代码，我们就可以使用postcss和插件的功能。首先我们要做的是在开发目录下新建一个 .css扩展的文件。
等等！一个css文件？没错，一个css文件。因为使用postcss转换我们的css，我们不需要特定的语法，只需要使用传统的css就可以。如果你熟悉预处理器，离开了 .sass, .scss, .styl或 .less文件回归到 .css，你会觉得不自然。但是，事实上，它带来的不是转换而是转变。
我们可以分别执行 grunt styles和 gulp styles使task runner运行，利用我们新安装的postcss插件来处理我们的样式。我们的开发样式文件将通过postcss插件被处理，然后输出到我们指定的生产目录。
以下是一些值得注意的插件，包括这些插件的安装和使用说明，在你开始使用postcss时会有一些帮助。
自动加前缀 编写兼容众多浏览器和设备的样式是一种痛苦，需要添加供应商前缀保持最新的属性和值更是一种挑战。所幸， autoprefixer可以找出何时何地需要提供前缀。该插件可以让我们在样式中使用新的特性和属性，为属性和值添加前缀由它来完成。
这里是如何通过命令行安装这个插件：
npm i autoprefixer -d
当我们在数组中添加一个插件时，我们需要提供一个对象，该对象提供项目支持的浏览器范围的数组。可以提供的选项列表可以在 browserslist github account中查看。
我们在处理器中添加一个autoprefixer插件
var processorsarray = [ // snipped for brevity require('autoprefixer')({browsers:['last 2 versions','ie 6-8','firefox > 20']}) ]
根据设定的目标不同，样式表中相应的css属性和值上会自动加上适当的前缀。
这是开发的css:
.item{ display:flex; flex-flow:row wrap; }
这里是转换后的输出：
.item{ display:-webkit-flex; display:-ms-flexbox; display:-webkit-box; display:flex; -webkit-flex-flow:row wrap; -ms-flex-flow:row wrap; flex-flow:row wrap; }
利用cssnext使用未来语法 css4不久将要来到我们身边，css4将带来一些新的特性，如[本地变量](http://www.w3.org/tr/css-variables/], 自定义媒体查询, 自定义选择器和新的 伪类链接。在写这篇文章时，这些新特性在所有浏览器都不支持，但是它们将在现代浏览器中实现规范得到了批准。
cssnext可以把任意的css4特征或属性转换成浏览器可以解析的css3属性。这个工具可以单独使用，也可以做为postcss的插件使用。我们接着把它也添加到 processorsarray， processorsarray里已经包含了其他我们需要的postcss插件。
通过命令行安装cssnext插件，如下：
npm i cssnext -d
(译者注：cssnext官网正式更名为postcss-cssnext,安装时请使用 npm i postcss-cssnext,估计是避免与cssnext混淆)
然后将它添加到你的处理器中：
var processorsarray = [ // snipped for brevity require('cssnext')() ]
现在，在你的生产代码中可以写css4的特性，postcss会通过任务管理器转换这些语法，从而被今天的浏览器支持。再用开发文件中的css替换这些转换后的代码即可。
这里是开发的css:
// 自定义变量:root{ --linkcolour:purple; }a{ color:var(--linkcolour); }// 自定义媒体查询范围@custom-media --only-medium-screen (width>=500px) and (width/@import partials/_base.css;/* 混入（mixins） */@define-mixin square $dimension{ width:$dimension; height:$dimension; }/* 嵌套，变量和混入 */.button{ @mixin square 200px; background:$green; &:hover{ background:$blue; } }
这里是转化后的输出：
.square{ background:#0000ff; border-radius:10px; }.button{ width:200px; height:200px; background:#00ff00; }.button:hover{ background:#0000ff; }

如果你想探索cssnext更多的功能，可以访问 playground这个网站，在这个网站上你可以尝试更多cssnext支持的css4特性。
sass语法 如果sass是你的首选预处理语言，不用担心：你可以在postcss中使用sass的语法和sass的工具。传统的css不支持变量，嵌套和引用，使用插件比如 precss就可以让我们使用这些特性，这样我们就可以在传统的样式文件中使用sass的语法。
如果通过命令行将插件添加到构建里，参考上面的演示将该包添加到processorsarray数组里，这样我们就可以立即使用sass语法了。如果我们从sass切换到了postcss,你需要把文件的扩展改成 .css,并且在你的task runner中立即执行。
通过命令行安装precss,如下：
npm i precss -d
把这个插件添加到你的处理器中：
var processorsarray = [ // snipped for brevity require('precss')() ];
这里是开发的css：
/* 变量 */$blue:#0000ff;$green:#00ff00;$radius:10px;.square{ background:$blue; border-radius:$radius; }/* 引用 */@import partials/_base.css;/* 混入（mixins） */@define-mixin square $dimension{ width:$dimension; height:$dimension; }/* 嵌套，变量和混入 */.button{ @mixin square 200px; background:$green; &:hover{ background:$blue; } }
这里是转化后的输出：
.square{ background:#0000ff; border-radius:10px; }.button{ width:200px; height:200px; background:#00ff00; }.button:hover{ background:#0000ff; }

利用社区插件扩展css postcss的能力在于社区插件，插件可以帮忙我们更加有效的编写代码。这些插件给我们提供了编写代码更快捷的方式，或者至少可以使用更容易的方法来实现创造性的样式。借助postcss api,这些插件允许我们在项目中可以自定义属性，选择器和值，便得我们可以更有效的编写样式，尽量少的使用搜索。
quantity queries 数量查询功能非常强大。他们允许我们 在css中计算元素数量，从而基于兄弟元素的数量应用样式。在今天，你可以在css中使用数量查询，因为数量查询依赖一些先进的css选择器，所以在写这些选择器时有点棘手。在线工具 qq的存在可以帮忙我们完成这样的查询，我们也可以在样式中直接使用postcss自定义选择器。
像其他插件的安装一样，使用命令行安装quantity queries插件，如下：
npm i postcss-quantity-queries -d
并且在你的处理器中添加这个插件：
var processors = [ // snipped for brevity require('postcss-quantity-queries')() ];
一旦这个插件安装好，你就可以只通过这个插件自定义选择器和变量，基于匹配的元素应用样式了。
这里是开发的css:
// 至少数量的兄弟元素应用样式.container > .item:at-least(5){ background:blue; } // 最多数量的兄弟元素应用样式.item > a:at-most(10){ color:green; }// 范围数量的兄弟元素应用样式.gallery > img:between(4,7){ width:25%; }// 精确提供项的兄弟元素应用样式 .profiles:exactly(4){ flex:1 0 50%; }
这里是转化后的输出：
.container > .item:nth-last-child(n+5),.container > .item:nth-last-child(n+5) ~ .item{ background:blue; }.item > a:nth-last-child(-n+10):first-child,.item > a:nth-last-child(-n+10):first-child ~ a{ color:green; }.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child,.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child ~ img{ width:25%; }.profiles:nth-last-child(4):first-child,.profiles:nth-last-child(4):first-child ~.profiles{ flex:1 0 50%; }
利用short扩展简写属性 我们在写样式时，偶尔会遇到一些属性的语法让你说，应该能短一些。所幸， short插件可以帮助我们做到这一点：写样式更加有逻辑性。它让我们可以为 position和 size写简写属性，就像 background和 font属性可以凝聚成一个单一的声明。
通过postcss api，简写声明被转换成浏览器易解析的样式，允许一个简洁开发样式表和一个更有组织的生产样式表。
使用命令行安装short:
npm i postcss-short -d
并且在你的处理器中添加这个插件：
var processors = [ require('postcss-short')() ];
text属性包括这些输入属性： color, font-style, font-variant, font-weight, font-stretch, text-decoration, text-align, text-rendering, text-transform, white-space, font-size, line-height, letter-spacing, word-spaceing和 font-family。
这里是开发的css：
p { text:300 uppercase dimgrey center 1.6rem 1.7 .05em; }
这里是转化后输出的css：
p{ color:dimgrey; font-weight:300; text-align:center; text-transform:uppercase; font-size:25px; font-size:1.6rem; line-height:1.7; letter-spaceing:.05em; }
position属性允许 top, left,'right', bottom值包含在一个声明中。 值的顺序是顺时针方向。语法中取值从1到4，如果有一个值你想排除，只需使用*星号替换即可。
这里是开发的css：
section{ position: absolute 10px * *; } .topnav{ position: fixed 0 * * 0; } .modal{ position: fixed 40% 25%; }
这里是转化后输出的css：
section{ position:absolute; top:10px; }.topnav{ position: fixed; top:0; left:0; }.modal{ position:fixed; top:40%; right:25%; bottom:40%; left:25%; }
这对我们的行业意味着什么？ 今天使用postcss完全有可能获得实惠。就像编译sass和less,你可以把postcss合并到你的工作流中，通过修改task runner来处理postcss。合并的插件像precss允许你将现有的sass项目移植到postcss，而不需要做任何的语法转化。
本文撰写之时，关于在什么地方写css最好的讨论正在持续。伴随着 react库越来越普及，在组件自身内部写样式，使用javascript直接转换css进行编译，这种思路正蓄势待发。虽然这仍然是个讨论，但使用postcss转换样式确实是一种方法。
另一个在行业内掀起波澜的项目是 css模块, 样式作用范围在本地文件，需要使用时直接引用该文件。这个概念在javascript圈已经非常流行。随着前端语言之间的界线越来越模糊，比如 react和jsx,css和javascript结合的能量不容忽视。
postcss通过自定义语法和属性以崭新方式扩展css，它的复杂性也将会为试图熟悉这个语言的初学者带来新的挑战。如果在项目中使用postcss的是一位年轻的开发者，请多多鼓励他深入了解css本身，以及理解postcss其实与sass差不多，都是提高样式编写效率的工具而已。
今天采用postcss 在接下来的几年里，我们使用css的方式将会在许多不同的方面发生改变。每个项目会有不同的需求，我们将不得不调整我们的开发方式。有了postcss这样的模块化生态系统，我们就可以根据项目需求选择功能。
我鼓励你去探索postcss的世界，并且探索它所有可用的插件。因为它是一个社区项目，只有人们去使用它并创建新的插件，这个生态系统才会成长壮大。探索更多的插件，可以访问npm的 availabel packages，也可以在 postcss playground中测试插件的功能。