Less变量不支持块级作用域，仅存在全局与局部词法作用域；局部变量会完全覆盖同名全局变量，从声明处起影响该块及所有子嵌套，且不会自动恢复父级值。
Less变量没有“块级作用域”，只有词法作用域
Less变量不支持@name在{ }块内定义后自动恢复上层值。所谓“嵌套中被覆盖”，本质是变量在编译期按就近向上查找规则重赋值，且**后续所有引用都指向新值**——不是遮蔽，是替换。
常见错误现象：@primary-color在.modal { @primary-color: #f00; .header { color: @primary-color; } }里改了，结果.sidebar里也变成红色；你以为只改了 modal 内部，实际全局生效了。
- 变量一旦在某个嵌套层级用
@name: value;重新声明，它就覆盖了所有更外层同名变量 - 这个覆盖从声明语句起生效，影响该块及所有子嵌套（包括
&:hover、@media等） - 没有
let或const语义，重复声明=重赋值，不存在“临时作用域”
为什么“延迟加载”不是解药，反而容易误导
Less没有运行时变量解析，所谓“延迟”只是指变量求值发生在编译末期（比如@x: @y + 1;中@y必须已定义），但**不改变作用域行为**。很多人误以为把变量写在@media或&:hover里就能“延迟作用”，其实只是把重赋值时机拖到嵌套块内，覆盖范围反而更难预料。
例如：.btn { @size: 14px; &:hover { @size: 16px; font-size: @size; } } → 编译后.btn:hover用16px，但若外部还有.label { font-size: @size; }，它也会变成16px（只要.btn定义在它前面）。
-
@media、&、:not()这些语法不创建新作用域，只是生成新选择器 - 变量查找永远基于文件顺序 + 嵌套层级，和 CSS 规则是否“生效”无关
- 试图靠
@import顺序控制变量“生效时机”极不可靠，尤其涉及多个文件互相@import时
真正可控的替代方案：用Mixin封装+显式传参
别让变量自己“冒泡”，把需要变化的值作为参数塞进.mixin()里。Mixin 是函数式思维，天然隔离上下文，不会污染全局变量表。
比如按钮主题切换：.btn(@bg: @primary-color) { background: @bg; color: white; }，调用时写.btn-primary { .btn(@primary-color); }和.btn-warning { .btn(@warning-color); }，互不影响。
- 避免在嵌套块内直接赋值变量，改用
.mixin(@param)接收变化值 - 需要复用逻辑但不想重复写样式？用带默认参数的Mixin：
.card(@padding: @space-md, @radius: @card-radius) { ... } - 如果真要模拟“局部变量”，只能手动保存再还原：
@_tmp: @primary-color; @primary-color: #f00; ... @primary-color: @_tmp;，但极易出错，不推荐
构建配置里启用javascriptEnabled: true不能解决作用域问题
这个选项只允许Less解析JavaScript表达式（如@height: unit(100vh / 2, px);），跟变量作用域完全无关。有人在vue.config.js里加了它以为能“修复覆盖”，其实是混淆了功能边界。
如果你正在用iview或ant-design-vue这类组件库并想覆盖其变量，请确认两点：less已安装、less-loader配置中javascriptEnabled设为true（仅当用到JS表达式时才需要），但变量覆盖本身仍需靠@import顺序和命名空间控制。
-
javascriptEnabled≠ 作用域控制，它只放开~"js expression"语法支持 - 组件库变量覆盖失败，90%原因是
@import顺序不对，或没用!important兜底（虽然不推荐） - 最稳妥的方式是：在入口
main.less里先@import "variables";，再@import "node_modules/xxx/lib/style/index.less";
Less变量作用域的复杂点在于：它看起来像编程语言，实则仍是静态编译规则。最容易被忽略的是——你写的每一条@name: value;，都在悄悄改写后续所有同名引用的含义，无论它们物理上离得多远。
