什么是 CSS 预处理器 与 后处理器

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 的未来标准

缺点

逻辑处理能力有限