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 的未来标准
缺点
逻辑处理能力有限
