PostCSS (一)：认识 PostCSS

PostCSS (一)：认识 PostCSS

PostCSS 是一款对 CSS 进行处理的工具。它主要依赖插件来进行操作。当你需要某些功能的时候，只需配置相应的插件即可。它有非常非常丰富的插件，可以涵盖你的开发过程的各个方面。即使没有满足你需要的插件，你也完全可以使用 JavaScript 来开发自己的插件就可以了。

它可以作为一款 CSS 前置处理器( preprocessor ) 使用, 就像 Sass 和 Less 等一样，使用 postcss-simple-vars, postcss-mixins, postcss-nested, postcss-sass-extend 等插件来实现 Sass 提供的 变量， mixin，选择器嵌套，extend 等功能。如果你不想自己配置，也可以使用一款已经打包好这些功能， 语法与 Sass 相似的插件precss 来实现preprocessor。

它也可以作为一款 后处理器 (post processor)来使用，配合这些插件，满足你的需求：

• 针对浏览器兼容：

1. 如果你想使用未来的 CSS 特性那你可以使用cssnext ；

2. Autoprefixer，它根据 Can I use… Support tables for HTML5, CSS3, etc 上的数据给属性添加相对应的浏览器前缀。

3. 对老版本的浏览器没有的属性，有postcss-color-rgba-fallback, postcss-will-change等插件对其回退；

• 针对 CSS 优化

1. 合并媒体查询(media query)有 css-mqpacker 插件；

2. 删掉空格分号，最小化 CSS 文件，有cssnano插件；

• 提高开发效率

1. 模块化 CSS 有 postcss-import 插件通过@import整合所有模块；

2. 简写 CSS 属性，比如margin-left写作ml, 有postcss-crip插件；

3. 引入第三方字体，postcss-font-magician 插件可以只指定font-family即可，@font-face的代码由插件完成；

4. 生成各种方向的图形， 有postcss-triangle插件生成三角形， postcss-circle生成圆形

5. 生成网格系统，有lost 插件
   …..

可以看到 PostCSS 的插件就像一座宝库一样，可以从各个方面满足你，如果没有你需要的，那就自己动手写一个也是非常简单的，PostCSS 提供了相应的 API ， 只需要一些 JavaScript 代码就能定制满足自己需求的插件。

PostCSS 可以做这么多事，又这么方便简单，你有没有爱上它？