css预处理器
定义
广义上说，目标为css的预处理器就是css预处理器。本文主要指以最终生成css为目标的领域特定语言。例如：Sass Less Stylus
例子
以less为例
.opacity(@opacity: 100) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
.sidebar {
.opacity(50);
}
将它转换成生产环境css就是
.sidebar {
opacity: 0.5;
filter: alpha(opacity=50);
}
对比上下，你会发现上下的代码编译前后完全是两种不同的语言
实现原理
- 取到dsl源代码的分析树
- 将含有动态生成相关节点的分析树转换为静态分析树
- 将静态分析树转换为css静态分析树
- 将css静态分析树转换为css代码
当然，在现实当中css预处理器会更加复杂一些。
优缺点
优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高
css后处理器
定义
对css进行处理，且最终生成css的预处理器。
它属于广义上的css预处理器。
例如：clean-css Autoprefixer
例子
以Autoprefixer 为例
.container {
display: flex;
}
.item {
flex: 1
}
转换为生产环境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
实现原理
- 将源代码作为css解析，获得分析树
- 对css的分析树进行后处理
- 将css的分析树转换为css代码
优缺点
优点：使用css语法，容易容易模块化贴进css的未来标准
缺点：逻辑处理有限
css开发模式的变化
原本：dsl源代码 到 生产环境css
现在：dsl源代码 到 标准css 到 生产环境css