PostCSS

引

相信写过css的都会听说过(或者用过)less/sass/scss/stylus等css扩展类语言，各个语言都有自己的语法，最终编译成可被浏览器解析的css。

近年来，各种浏览器兼容问题以及不同的需求使得PostCSS开始崭露头角。著名样式库Bootstrap的开发者(Mark Otto)也透露，下一版本的Bootstrap可能会选择用PostCSS重写一遍(Geek!)。

Geek

什么是PostCSS？

言归正传，PostCSS到底是什么呢?和Sass/Less一样吗?

答案肯定是不一样，毕竟重复造语言没什么意义。

哪些大企业在用PostCSS？

如PostCSS官网介绍，Wikipedia、Twitter、Alibaba、JetBrains等行业领导企业在使用。

PostCSS能做什么？

做什么

PostCSS是一个用js插件来自动化进行规范的CSS操作的软件开发工具。支持PostCSS的js插件可以lint CSS代码、可以支持变量和mixins操作、可以转义未来的CSS语法(future CSS syntax)、内联(inline)图片(注: 可能的意思是将图片转base64形式写入CSS文件)等，也支持自己编写js插件(有能力的话)。

插件系统

以下内容摘自官网README

解决全局 CSS 的问题

• postcss-use 允许你在 CSS 里明确地设置 PostCSS 插件，并且只在当前文件执行它们。
• postcss-modules 和 react-css-modules 可以自动以组件为单位隔绝 CSS 选择器。
• postcss-autoreset 是全局样式重置的又一个选择，它更适用于分离的组件。
• postcss-initial 添加了 all: initial 的支持，重置了所有继承的样式。
• cq-prolyfill 添加了容器查询的支持，允许添加响应于父元素宽度的样式.

提前使用先进的 CSS 特性

• autoprefixer 添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
• postcss-cssnext 允许你使用未来的 CSS 特性（包括 autoprefixer）。
• postcss-image-set-polyfill 为所有浏览器模拟了 image-set 函数逻辑。

更佳的 CSS 可读性

• precss 囊括了许多插件来支持类似 Sass 的特性，比如 CSS 变量，套嵌，mixins 等。
• postcss-sorting 给规则的内容以及@规则排序。
• postcss-utilities 囊括了最常用的简写方式和书写帮助。
• short 添加并拓展了大量的缩写属性。

图片和字体

• postcss-assets 可以插入图片尺寸和内联文件。
• postcss-sprites 能生成雪碧图。
• font-magician 生成所有在 CSS 里需要的 @font-face 规则。
• postcss-inline-svg 允许你内联 SVG 并定制它的样式。
• postcss-write-svg 允许你在 CSS 里写简单的 SVG。

提示器（Linters）

• stylelint 是一个模块化的样式提示器。
• stylefmt 是一个能根据 stylelint 规则自动优化 CSS 格式的工具。
• doiuse 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。
• colorguard 帮助你保持一个始终如一的调色板。

其它

• postcss-rtl 在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。
• cssnano 是一个模块化的 CSS 压缩器。
• lost 是一个功能强大的 calc() 栅格系统。
• rtlcss 镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。

其中最常用、出名的相信就是Autoprefixer了，主要做CSS的浏览器兼容。

下面是网上找来的描述PostCSS处理流程的图片。

PostCSS处理流程

使用

开发中的常用CSS预编译语言如Sass/Less等，利用PostCSS做浏览器兼容处理也比较简单，只需要将Sass/Less等编译生成的文件再经过PostCSS插件系统处理一遍即可。

具体的使用例子见更新。

更多学习资料

awesome-postcss https://github.com/jjaderg/awesome-postcss
Autoprefixer https://github.com/postcss/autoprefixer