先识别语言特征，再整理代码
从真正属于 LESS 的语法结构读懂源码。
变量只是最显眼的一项。参数化 mixin、guard 条件、detached ruleset 和 map lookup 共同构成 LESS 自己的语法，也带来不同于普通 CSS 的格式化错误边界。
@brand: #d97706;
@space: { sm: 8px; md: 16px; };
.btn(@pad; @bg) when (@pad > 0) {
padding: @pad;
background: @bg;
}
.icon(@name) {
width: @space[@name];
}
@card-base: { border-radius: 8px; };- 1@ 变量
保存主题 token 与属性值
- 2参数化 mixin
可传入参数并调用的规则集
- 3Guard · when
带条件的 mixin 定义
- 4Map lookup
用方括号读取 ruleset map
- 5Detached ruleset
作为值保存的规则集
Guarded mixin · 概念决策树
格式化会展开条件分支的结构，但不会执行分支。
.badge(@tone) when (@tone = primary) { color: white; }
.badge(@tone) when (@tone = neutral) { color: #111; }调用
.badge(primary)
条件 1
@tone = primary?
匹配
第一条 guarded 定义
后续
继续检查，或没有任何匹配
格式化器只解析并排版两条定义。只有 LESS 编译器在收到具体调用时，才会计算 guard 并决定采用哪一条。
Detached ruleset · 作用域与使用方式
Ruleset 可以先作为数据保存，再决定是否产生输出。
@card-base: {
padding: 16px;
border-radius: 8px;
};保存@card-base 本身不会输出 CSS
调用@card-base(); 会引入其中的声明
读取@config[primary] 读取 map 中的值
作用域定义位置和调用方上下文都可能影响结果
进入代码评审前的四个阶段
真正有用的终点是稳定源码，而不是虚假的编译结论。
1
压缩状态
难以阅读和评审
2
完成格式化
统一空格、换行和嵌套
3
解析通过
语法无需容错即可被接受
4
稳定源码
可进入评审或交给其他工具编译
根据语言特征选择正确解析器
LESS
parser: less@variables · when guard · detached ruleset
CSS
parser: css浏览器原生声明与 at-rule
SCSS
parser: scss$variables · 插值 · @use 模块