今天我们来学习一下这四个它们的关系与区别。
首先， css 即层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。(百度百科）
css 的写法大家都知道，没有变量，格式也不能嵌套，代码多且冗余，为了让样式写起来舒服，高效，方便一些，就有了 less 和 sass 、stylus, 他们的语法满足了你对简便方法的写法，并能够通过编译转换成对应的 css 代码，所以他们也叫做 css 预处理器。
详细介绍地址, 不了解的请一定要先进行观看: Sass vs. LESS vs. Stylus：Preprocessor Shootout
如果说这三种是 css 预处理器，那么 postcss 又是啥呢?
见官方 github。
PostCSS是一个使用JS插件转换样式的工具。这些插件可以提升CSS，支持变量和混合，转换未来的CSS语法，内联图像等。
也就是说你可以在 postcss 写类似 sass 的语法，或者一系列 postcss 插件支持的功能，然后使用 postcss 插件进行编译成 css 代码。它和前面三个的区别就是，它可以实现自定义化，根据你需要的功能，配置相应的插件，做一个适合自己的预处理器。
它现在也是有非常非常多的插件的。
precss 包含类似Sass功能的插件，如变量(custom-properties)，嵌套(nesting) 和 mixins。
postcss-sorting 对规则和规则的内容进行排序。
postcss-custom-properties 自定义变量并保留属性。
postcss-utilities 包括最常用的快捷方式和帮助程序。
…
关于 postcss 插件的组合方法我们可以通过看 precss 的用法示例
"precss": {
"version": "1.4.0",
"resolved": "http://registry.npm.souche-inc.com/precss/download/precss-1.4.0.tgz",
"integrity": "sha1-jXw65w8QoAo5VSh/haZuD4sxzaM=",
"dev": true,
"requires": {
"postcss": "^5.0.10",
"postcss-advanced-variables": "1.2.2", // CSS中使用变量，条件和迭代器。
"postcss-atroot": "^0.1.2",
"postcss-color-function": "^2.0.0", // 颜色方法
"postcss-custom-media": "^5.0.0", // media 选择器
"postcss-custom-properties": "^5.0.0", // css3 变量
"postcss-custom-selectors": "^3.0.0", // 自定义选择器
"postcss-extend": "^1.0.1",
"postcss-media-minmax": "^2.1.0",
"postcss-mixins": "^2.1.0",
"postcss-nested": "^1.0.0",
"postcss-nesting": "^2.0.6",
"postcss-partial-import": "^1.3.0",
"postcss-property-lookup": "^1.1.3",
"postcss-selector-matches": "^2.0.0",
"postcss-selector-not": "^2.0.0"
}
其实就是引了这些插件之后，你就可以用高级的语法糖了。有兴趣的可以去 github 看看这些插件功能。
