CSS预处理器和后处理器

预处理器

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

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

优点

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

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

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

缺点

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

实现原理

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

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

3. 将 静态分析树 转换为 CSS 的 静态分析树

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

什么是DSL❓

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

主流的CSS预处理器

Sass、Less、Stylus 是目前最主流的 CSS 预处理器，我个人喜欢用less，学习起来比较简单，使用上更贴合CSS。

关于这3个预处理器的比较就不展开了，网上有很多文章。

后处理器

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

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

或许你没有听过这个概念，但是应该用过，例如autoprefixer、tailwindcss等。

实现原理

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

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

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

后处理器框架PostCSS

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

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

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

PostCSS自身只包括了CSS分析器，CSS节点树API，source map生成器，CSS节点拼接器，而基于PostCSS的插件基本上都是使用了CSS节点树API来实现的。

如何查看PostCSS解析后的AST

可以在astexplorer上查看解析出来的AST：

1. 选择CSS image
2. 选择postcss image
3. 然后可以在右边解析区域看到ast，可以在root.nodes看到所有的解析后的结果： image