CSS处理器是做什么的?
CSS本身不是编程语言,所以在项目越来越大时,开发和维护就会越来越复杂
CSS处理器做的事情 就是帮助我们提高大规模开发时的效率
CSS 预处理器
CSS 预处理器是一种语言,用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题
例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处
Sass、LESS、Stylus 是目前最主流的 CSS 预处理器
以 LESS 为例:
LESS
.opacity(@opacity: 100) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
.sidebar {
.opacity(50);
}
以上 DSL 源代码 (LESS),编译成 CSS:
.sidebar {
opacity: 0.5;
filter: alpha(opacity=50);
}
实现原理
1. 取到 DSL 源代码 的 分析树
2. 将含有动态生成相关节点的分析树 转换为 静态分析树
3. 将 静态分析树 转换为 CSS 的 静态分析树
4. 将 CSS 的 静态分析树 转换为 CSS 代码
优点
语言级逻辑处理,动态特性,改善项目结构
缺点
采用特殊语法,框架耦合度高,复杂度高
CSS 后处理器
CSS 后处理器 是对 CSS 进行处理,并最终生成 CSS 的 预处理器,它属于广义上的 CSS 预处理器
比如最近比较火的 Autoprefixer,可以对css自动处理兼容性问题
示例
以 Autoprefixer 为例:
.container {
display: flex;
}
.item {
flex: 1;
}
将以上标准CSS,编译为处理了兼容性的 生产环境 CSS:
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
可以看到,编译前 与 编译后 的代码都是 CSS
实现原理
1. 将 源代码 做为 CSS 解析,获得 分析树
2. 对 CSS 的 分析树 进行 后处理
3. 将 CSS 的 分析树 转换为 CSS 代码
优点
使用 CSS 语法,容易进行模块化,贴近 CSS 的未来标准
缺点
逻辑处理能力有限