首页 > 开发 > CSS > 正文

详细解读CSS的预编译器PostCSS

2024-07-11 08:55:24
字体:
来源:转载
供稿:网友

提到css预编译器(css preprocessor),你可能想到Sass、Less以及Stylus。而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到。

“你说的我都懂,那为什么要用它?”


套装与单件

如果Sass等预编译器是新定义了一种模板语言,然后将其转化为css的话,PostCSS则是更纯粹地对css本身做转换。

回想一下你是如何学习使用css预编译器的:了解到有这样一种可以转化为css的语言,它有很多特性,变量、嵌套、继承等等,每一种特性都通过一定语法实现。大概就像是递给你一个已经封装好的工具箱(量产型?),你可以在里面找有用的东西。

那PostCSS是怎样呢?PostCSS就像只递给你一个盒子,但告诉你你可以从旁边的陈列柜取走自己想要的工具放进盒子打包带走。如果你觉得陈列柜里的不够好,PostCSS还可以帮你打造你自己的工具。所以,使用PostCSS,你可以仅取所需。
2015720165145557.png (100×100)

这就是PostCSS的模块化(modular)风格。它作为一个css转换工具,自身很小,其所有的转换功能都是插件,因此可以个性化配置。


PostCSS的简要原理

PostCSS自身只包括css分析器,css节点树API,source map生成器以及css节点树拼接器。

css的组成单元是一条一条的样式规则(rule),每一条样式规则又包含一个或多个属性&值的定义。所以,PostCSS的执行过程是,先css分析器读取css字符内容,得到一个完整的节点树,接下来,对该节点树进行一系列转换操作(基于节点树API的插件),最后,由css节点树拼接器将转换后的节点树重新组成css字符。期间可生成source map表明转换前后的字符对应关系:
2015720165213722.png (324×412)

比较有意思的是,PostCSS的插件其实都是JavaScript函数,它们使用PostCSS的节点树API,对css节点树进行不同的转换。

插件预览

所有插件都可以在PostCSS的主页中查询到,这里只选取一小部分示意一下。
Autoprefixer

PostCSS最有名的插件是Autoprefixer。如名所示,可以自动为你添加浏览器私有前缀。它的添加值会参考Can I Use及你设定的浏览器支持范围,因此相当可靠。下面是一个示例(以我设定的浏览器支持范围):

CSS Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表