缘起

之前一直使用 Autoprefixer 来处理 CSS 的前缀,配合着 gruntgulp 等构建工具,用起来非常的方便。但不知从什么时候起,grunt-autoprefixer 的首页不推荐使用了,转而推荐使用 PostCSS。经过一番折腾,发现了 PostCSS 这一神器,推荐给需要的朋友。

PostCSS

PostCSS 是一款用 JS 插件来转换样式的工具。

PostCSS 会将 CSS 代码解析成抽象的语法树,并对外提供 API 给其他插件使用,其本身并不会对 CSS 做任何修改,所有的操作都由外部的插件完成,包括上面提到的 Autoprefixer。

插件

PostCSS 拥有众多的插件,足够我们日常的工作需要。具体的插件列表可以参见这里或者这里

使用 Grunt 和 Gulp

经过一段时间的使用,发现 PostCSS 可以接管大部分和 CSS 相关的操作,包括合并,压缩,更新图片时间戳等。PostCSS 有对应的 gulp-postcssgrunt-postcss 插件,方便在 Grunt 和 Gulp 中使用。

Sass, Less

PostCSS 主页中声称其可以做 Sass 和 Less 等 CSS 预处理器的工作,并且性能是后者的 3-30 倍。我相信通过使用其丰富的插件是可以完成这些工作的,并且 PostCSS 是高度模块化的,很方便我们对他进行扩展。

个人认为,PostCSS 和 Sass 这些 CSS 预处理器并不完全是竞争关系,完全可以做到互补,例如可以用 Sass 生成 CSS 代码,然后再用 PostCSS 对其作一些后续的处理操作。

总结

PostCSS,你值得拥有!