一、PostCss简介
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS（A tool for transforming CSS with JavaScript）。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。
PostCSS 不会单独使用，而是与已有的构建工具配合使用，如 Gulp、Grunt 和 Webpack 都可以。我们只需要选择需要的 PostCSS 插件进行配置。本文主要介绍在Gulp 中使用 PostCSS 的几种常用插件。
二、构建gulp + PostCss项目
关于gulp的使用方法，请参考gulp教程，构建步骤：
<pre>
1.npm init
2.npm install gulp gulp-postcss --save-dev
3.npm install autoprefixer --save-dev（添加需要引用的插件）
</pre>
在项目文件夹下新建文件gulpfile.js、文件夹/dest & /src，然后配置gulpfile.js:
<pre>
var gulp = require('gulp');
var postcss = require('gulp-postcss');
// autoprefixer 给某些需要兼容性的属性添加浏览器私有前缀
var autoprefixer = require('autoprefixer');
// cssnext 允许使用CSS的将来版本
var cssnext = require('cssnext');
// precss 检查了@if @else，编译符合需求的代码
var precss = require('precss');
// alias 定义自己的速写或"别名"
var alias = require('postcss-alias');
// postcss-crip 有数百个属性缩写的插件
var crip = require('postcss-crip');
// 创建CSS图形 postcss-circle(创建圆) postcss-triangle(创建三角形)
var circle = require('postcss-circle');
var triangle = require('postcss-triangle');
// 使用 top: center; 来达到垂直居中， left: center; 达到水平居中
var center = require('postcss-center');
gulp.task('css', function() {
var processors = [
autoprefixer,
cssnext,
precss,
alias,
crip,
circle,
triangle,
linkcolor,
center
];
return gulp.src('./src/.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
gulp.task('default', ['css']);
</pre>
配置完成后，我们可以来测试下postcss插件到底能带来什么样的惊喜。
1.在/src目录下新建一个style.css的文件，随便写一个平常我们需要设置浏览器前缀的样式，例如:
<pre>
.demo {
display: flex;
transform: rotate(90deg);
}
</pre>
2.在控制台输入命令gulp css 或者gulp，查看/dest文件夹，发现文件夹下有一个style.css的文件，里面就是通过postcss的autoprefixer插件处理的css代码：
<pre>
.demo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</pre>
再看看其他postcss插件所起到的效果：
1.cssnext 插件允许开发人员在当前的项目中使用CSS将来版本中可能会加入的新特性。cssnext 负责把这些新特性转译成当前浏览器中可以使用的语法cssnext 是一系列与 CSS 将来版本相关的 PostCSS 插件的组合，更多方法可以参考更多cssnext方法。
• 自定义属性的名称以“--”开头。当声明了自定义属性之后，可以在样式规则中使用“var()”函数来引用，如下：
<pre>
.cssnext {
background: color(red alpha(-10%));
}
:root {
--mainColor: red;
}
a {
color: color(var(--mainColor) alpha(90%));
}
编译后的结果：
.cssnext {
background: rgba(255, 0, 0, 0.9);
}
a {
color: rgba(255, 0, 0, 0.9);
}
</pre>
• 自定义选择器，CSS 扩展规范（CSS Extensions）中允许创建自定义选择器，比如可以对所有的标题元素（h1 到 h6）创建一个自定义选择器并应用样式。通过“@custom-selector”来定义自定义选择器。
<pre>
@custom-selector :--style h1, h2, h3, h4, h5, h6;
:--style {
font-weight: bold;
}
编译后的结果：
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
}
</pre>
• @apply，命名自定义属性中存储一组属性，然后以其他样式引用它们，类似于sass的@extend，需要引用并下载：
<pre>
在gulpfile.js中引用：
var apply = require('postcss-apply');
在控制台输入命令：
npm install postcss-apply --save-dev
</pre>
<pre>
:root {
--my-theme: {
background-color: black;
color: white;
border: 1px solid green;
};
}
.my {
@apply --my-theme;
}
编译后的结果：
.my {
background-color: black;
color: white;
border: 1px solid green;
}
</pre>
• calc()可以使用数学运算中的简单加（+）、减（-）、乘（）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算：
<pre>
在gulpfile.js中引用：
var calc = require('postcss-calc');
在控制台输入命令：
npm install postcss-calc --save-dev
</pre>
<pre>
:root {
--font-size-theme: 14px;
}
body {
font-size: var(--font-size-theme);
}
div {
font-size: calc(var(--font-size-theme) x 2);
height: calc(50px - 1em);
margin-bottom: calc(var(--font-size-theme) x 1.5);
}
编译后的结果：
body {
font-size: 14px;
}
div {
font-size: 28px;
height: calc(50px - 1em);
margin-bottom: 21px;
}
</pre>
2.使用纯CSS来创建形状，如postcss-circle & postcss-triangle，创建圆形和三角形的语法：
<pre>
.circle {
circle: size color
}
.triangle {
triangle: pointing-<up|down|left|right>;
width: <length>;
height: <length>;
background-color: <color>;
}
</pre>
postcss有许多有趣的插件，有兴趣的可以去github上查看相关的plugin，然后尝试使用。
