Less变量不支持块级作用域。其作用域为就近向上查找的词法作用域，仅分全局与局部，局部变量会完全覆盖同名全局变量，而非遮蔽；定义在规则块内的变量从定义处起影响该块及所有子嵌套块，且不会自动恢复父级值。
Less变量是否支持块级作用域？
不支持。Less变量没有JavaScript那样的块级作用域概念，它的作用域是“就近向上查找”的词法作用域，只分全局和局部（嵌套规则内定义），且局部变量会**完全覆盖**同名全局变量——不是“遮蔽”，而是替换后续所有引用。
常见错误现象：@primary-color 在 .btn 嵌套块里重新赋值后，外部的 .header 也意外变成新颜色；你以为只是“局部改”，实际是全局生效了。
- 变量在规则块（如
.card { ... }）内用@name: value;定义，即为局部变量 - 局部变量从定义处起，影响该块内及所有子嵌套块，**不会自动恢复父级值**
- 没有
let或const语义，重复声明同名变量等于重赋值 - 想模拟“临时覆盖”，必须显式保存原值再还原（不推荐，易出错）
如何安全地实现“样式层级隔离”？
别依赖变量作用域，用嵌套选择器 + 局部类名组合来隔离样式行为。Less 的真正优势在嵌套和混合，而非变量作用域控制。
使用场景：组件库中 .modal 需要一套配色，但不希望影响全局 @theme-color。
立即学习“前端免费学习笔记（深入）”；
- 把主题变量封装进
.modal-theme()混合（.modal-theme() { @bg: #fff; background: @bg; }），调用时才注入上下文 - 用带命名空间的变量前缀，如
@modal-bg、@card-bg，避免命名冲突 - 通过
!important或更具体的选择器优先级解决覆盖问题，而不是靠变量“作用域” - 慎用
@import中的reference模式——它让变量不输出，但依然参与计算，容易误判可见性
为什么 extend 和 mixins 比变量作用域更可靠？
因为 extend 和 mixins 是编译时确定的样式复用机制，不依赖运行时变量查找链，行为可预测。
错误做法：在多个 .section 里反复重定义 @text-size，指望每个 section 独立；结果是最后一个定义生效，全部 section 被统一修改。
-
.button-style() { color: @text-color; font-size: @text-size; }—— 每次调用都基于当前作用域变量快照 -
.btn-primary:extend(.button-style all) {}—— 复用的是已计算好的 CSS 规则，与变量无关 - 混合可带参数：
.text-style(@size: 14px) { font-size: @size; }，调用时传参比改变量更直接 -
extend不支持变量参数，但它生成的是真实选择器继承，无作用域歧义
编译后CSS中看不到变量，那调试时怎么查来源？
Less 编译器不保留变量元信息，Chrome DevTools 显示的只是最终 CSS 值，无法反推是哪个 @var 贡献的。这是最容易被忽略的调试盲区。
性能影响：变量本身无运行时开销，但过度嵌套 + 变量重定义会让编译变慢，尤其开启 source map 时。
- 启用
source-map并配合lessc --source-map，至少能定位到 .less 行号 - 用
// DEBUG: @primary-color = @{primary-color}注释临时打印值（需手动删） - 避免在循环（
.loop(@i) when (@i > 0)）中修改变量——Less 不支持动态变量绑定，循环内赋值无效 - VS Code 插件 “Easy Less” 可实时高亮变量定义/引用，比肉眼搜
@快得多
