在 Stylus 的编译过程中，解析阶段和评估阶段是两个关键步骤，具体分工如下：

一、解析阶段（Parsing Phase）

1、作用

将 Stylus 源代码转换为抽象语法树（AST）。

2、过程

• 词法分析：将代码拆解为标记（tokens），如变量名、选择器、运算符等。
• 语法分析：根据 Stylus 语法规则构建 AST，检查代码结构的正确性，如括号匹配、缩进层级、展开嵌套层级等。

3、示例

解析阶段会识别变量$color的声明、body选择器及其属性，形成 AST 节点，但不处理变量值或计算。

$color = red
body
  color: $color

二、评估阶段（Evaluation Phase）

1、作用

对 AST 进行动态处理，生成可输出的静态 CSS 结构。

2、过程

• 变量替换：将变量引用替换为定义的值。
• 混合展开：将混合（mixins）调用替换为实际 CSS 代码。
• 运算与函数：执行数学运算（如2px + 3px）和函数调用。
• 条件与循环：处理@if、@for等逻辑，展开为具体的 CSS 规则。

3、示例

$padding = 2px + 3px
.box
  padding: $padding

评估阶段会计算2px + 3px为5px，替换$padding，最终生成：

.box {
  padding: 5px;
}

三、对比

阶段	输入 输出	主要任务
解析阶段	Stylus 源代码 → 抽象语法树（AST）	语法检查、结构分析
评估阶段	AST 处理后的 → 静态 CSS 代码	变量替换、混合展开、运算、逻辑处理

总结

• 解析阶段是编译的起点，确保代码语法正确并构建结构化的 AST。
• 评估阶段是动态处理的核心，将高级特性（变量、混合、循环等）转换为静态 CSS。
• 最终，处理后的 AST 会进入生成阶段，输出为浏览器可识别的 CSS 代码。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24