postcss--预处理器与后处理器

这个听起来很别扭的后处理器(postprocessor)是个什么东西,预处理器大家很常见 less,sass,stylus……

今年关于越来越多的网站只使用-webkit前缀的抱怨越来越多(多数是装委屈的微软),其实已经有很多处理方案:

  1. 如果你项目里有用到sass之类的预处理器,@include可以帮你解决
  2. 编辑器里的emmet,在属性前加-帮你自动生成
  3. 打开prefixr来格式化一下
  4. 当然最好的方法是你随便写,然后雇个女秘书帮你补全。

autoprefixer

少年,醒醒吧,起来码砖了,哪有秘书帮你补全。这时候可以直接写标准属性,让autoprefixer,帮你处理,效果比秘书还好。
这个autoprefixer就是一个后处理器,可以分析你的css文件,并根据设定好的规则添加前缀,具体使用方法css-tricks 1 有详细的文章介绍,国内也有不少同学有翻译。
其实说到后处理器听着新鲜,并不是什么新鲜事物,用来在上线前压缩css文件的yui compressor也算是后处理器的一种。autoprefixer先进的地方在于其背后的postcss

postcss

postcss是一个css后处理器的框架,可以用来分析css规则,并给出AST(抽象语法树),可以很方便的用JS来修改CSS,剩下的只是你想你力的问题了。
严格上来说postcss不只是一个后处理器,只是因为提供了强大的功能,可以在后处理环节上代替预处理器的功能,让你在书写css的过程中,不需要去使用预处理器的奇怪的语法。

①sass(or less) --> ②css(dev) --> ③css(production)

在上面这个常见的workflow中,如果用预处理器,你要从①预处理器语法开始。不提预处理器在提供强大功能的同时,让学习曲线变得陡峭(其实也没多难),光是那些额外的语法声明,就大大降低了书写速度。使用后处理器的优势在于,可以直接从②css,好处不言而喻。

当然上面提到了,其实postcss不只是一个后处理器,如果你愿意,同样可以用它提供的功能来实现预算器。比如最常用的嵌套,可以直接在css里写,然后让postcss来处理,当然,如果你在css中使用了嵌套,其实已经使用了新的语法,本身已经是一种预处理了。

改进workflow

啰嗦了这么多,其实后处理器不是一种用来代替预处理器的工具,利用postcss,将整个workflow变得更高效和便利,如果有一些css之外的语法你仍然需要,比如嵌套、变量等等,仍然可以使用sass之类的预处理器来完成。但添加前缀转换单位低版本浏览器的hack之类的工作,完全可以放到 ② --> ③ 中让后处理器来完成。

polyfills

另外一个postcss可以大有用途的地方是结合JS做polyfills。举个栗子,比如常用的respond.js,由于要在浏览器端用JS去分析css文件去执行,虽然省事但效率不高。现在就可以用postcss在③步的时候分析出 @media query 对应的选择器和属性,并生成对应的json文件,然后直接用JS在低版本浏览器中去处理就可以了。类似还有calc()等都可以这样处理,目前postcss 2 官网已经有一些类似的插件了,自己的工作流程中有独特的需求,去实现一个也非常方便。有兴趣的同学也可以关注下postcss提到的rework3