Less嵌套中重声明变量会直接覆盖全局变量值而非创建局部作用域，导致后续所有未锁定引用均被修改；变量替换是编译时一次性文本替换，无惰性求值或运行时绑定，嵌套+@import更易引发顺序混乱与静默错误。
嵌套中重声明变量会创建新作用域
Less 的 & 嵌套不产生作用域隔离，但内部用 @var: value; 重新声明同名变量时，会覆盖外层变量——不是“局部遮蔽”，而是直接改写当前编译上下文里的值，影响所有后续引用。
- 比如外层定义了
@primary-color: #007bff;，在.btn { @primary-color: #dc3545; color: @primary-color; }里重声明，那么之后所有未被锁定的@primary-color引用（包括同文件后续的.link { color: @primary-color; }）都会变成#dc3545 - 这不是“作用域内有效”，而是编译器线性处理时的就近覆盖：变量表是扁平的、可变的，不是栈式作用域
- 浏览器开发者工具里完全看不出这个覆盖发生在哪一层嵌套里，只能靠全局搜索 + 编译输出比对
变量值在引用那一刻就被固化
Less 不做回溯重计算。一旦某条规则里写了 color: @primary-color;，编译器就立刻把当前上下文中 @primary-color 的值替换成字面量（如 #007bff），后续无论你在哪重定义 @primary-color，都不会影响这条已生成的 CSS。
- 常见误判：改了嵌套里的
@primary-color，但按钮颜色没变 → 实际是按钮样式在重定义之前就被编译了 - 验证方式：在嵌套块末尾加一条
.debug { color: @primary-color; }，看它是否输出新值；若输出旧值，说明该嵌套块内变量根本没被重定义（拼写错、缩进错、或被更早的声明锁死） - 没有“惰性求值”，也没有“运行时绑定”——它就是文本替换，仅此而已
嵌套 + @import 混用时顺序更难控制
当嵌套结构里又包含 @import（比如 .theme-dark { @import "dark-vars.less"; }），Less 会把导入内容展开到当前嵌套块内，导致变量注入位置不可控，极易触发 Variable is undefined 或静默覆盖。
-
@import在嵌套中不是“作用域内导入”，而是把文件内容原样塞进当前块，可能使变量定义出现在使用语句之后 - 例如
.theme-dark { @import "vars.less"; color: @text-color; }看似合理，但如果vars.less里有@import "mixins.less"且后者依赖未声明的@base-font，整个块会静默失效（输出color: @text-color;这种非法 CSS） - Webpack/Vite 的 HMR 对嵌套内
@import支持极差，热更新时常卡在旧变量快照上，样式闪动或回退
variables.less，或彻底放弃嵌套内变量，改用 mixin 参数传入。 
