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 能够作这么多事，又这么方便简单，你有没有爱上它？