CSS预处理器和后处理器

预处理器

当一门语言的能力不足而用户的运行环境又不支持其他选择的时候，这门语言就会沦为"编译目标"语言。 开发者将选择另一门更高级的语言(功能更多)来进行开发，然后编译到底层语言以便实际运行。

CSS 预处理器包含一套自定义的语法(为 CSS 增加一些编程的特性，例如原生 CSS 不具备或者不完善的功能) 及一个解析器，用户根据这些语法定义自己的样式规则。这些规则最终会通过解析器，编译成对应的 CSS 文件。

通俗的说，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

优缺点

优点：

• 提供更多高级特性，包括变量、嵌套、Mixins 和函数等。

• 减少冗余代码，提供 CSS 层缺失的样式层复用机制。

• 让 CSS 的结构更加具有可读性且易于维护。

缺点：

• 额外的配置成本和编译成本。

• 学习成本。

实现原理

• 取到 DSL 源代码（例如 Less 代码） 的 分析树

• 将含有 动态生成 相关节点的 分析树 转换为 静态分析树

• 将 静态分析树 转换为 CSS 的 静态分析树

• 将 CSS 的 静态分析树 转换为 CSS 代码

DSL：Domain Specific Language，领域受限的编程语言. 它与我们日常使用的一般编程语言不同，是被设计用来解决 特定问题域 的 语言工具 。

---

主流的 CSS 预处理器

Sass、Less、Stylus 是目前最主流的 CSS 预处理器

后处理器

CSS 后处理器 是对 CSS 进行处理，并最终生成 CSS。如果说预处理器是事前编译，那么后处理器就是事后编译。

预处理器和后处理器的分界点就在于编译的对象究竟是一份扩展语法形式的 CSS 还是纯 CSS。

CSS 后处理器的出现让 CSS 工作流更清晰，但现在他们还远未成熟，还有很多地方能够做的更好。

比如 Autoprefixer 只做语法 Prefix 层面的兼容，还需要一些专门处理如 IE 滤镜兼容这些问题的小模块配合使用。

比如可以针对 CSS 中单独使用的图片自动做 CSS Sprites 归类与合并的工作。

比如可以根据项目对图标字体字形的实际使用情况自动对字体进行体积优化。

当每个模块都专注于特定的问题时，那他多数情况下要比一个大而全的集中式框架更靠谱。

优缺点

• 优点：

  使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准

• 缺点：

  逻辑处理能力有限

实现原理

• 解析 CSS 代码，获得分析树（AST）

• 对 CSS 的分析树进行处理转换

• 将转换后的 CSS 分析树再转成 CSS 代码

主流的 CSS 后处理器

• CSS 压缩工具

  如 clean-css

• Autoprefixer

.container {
  display: flex;
}
.item {
  flex: 1;
}
// 编译为
.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;
}

• PostCSS

  PostCSS 是一个使用 JavaScript 转化 CSS 的框架。

  PostCSS 和 CSS 的关系就像 Babel 和 JavaScript 的关系，它们解除了语法上的禁锢，通过插件机制来扩展语言本身，用工程化手段给语言带来了更多的可能性。

  PostCSS 拥有非常多的插件，例如自动为 CSS 添加浏览器前缀的插件 autoprefixer、tailwindcss 等

• Rework

---

来源：

• CSS 预处理器 - 南风逸梦 (opens new window)
• CSS 预处理器与 CSS 后处理器 (opens new window)