Less变量无局部作用域，所有@variable全局可见；所谓“局部覆盖”实为线性赋值顺序决定的最后一次有效声明，非作用域隔离；嵌套中修改@color会导致外部同步变化，因其不遵循词法作用域，仅依据定义位置与@import顺序生效。
Less变量没有“局部作用域”概念，所有@variable默认全局可见；所谓“局部覆盖”，本质是线性赋值顺序决定的最后一次有效声明，不是作用域隔离。
为什么@color在嵌套里改了，外面也跟着变？
Less变量不是词法作用域，不按块或嵌套层级查找。它只认定义位置和导入顺序：同一文件中后定义的会覆盖前定义的；跨文件则取决于@import顺序。
-
.card { @padding: 16px; &__header { padding: @padding; } &__body { @padding: 24px; padding: @padding; } }→&__header实际用的是24px，因为第二个@padding覆盖了第一个 - 嵌套里的
@padding不是“子作用域变量”，只是同名重写 - 想真正隔离？必须用
.mixin(@p: 16px) { padding: @p; }显式传参，而不是裸写@变量
!default不是局部开关，而是“首次赋值守门员”
!default只在变量**尚未被赋过值**时生效，它不提供作用域保护，也不支持回滚或条件覆盖。
-
@primary-color: #007bff !default;写在base.less里，项目里再写@primary-color: #28a745;才有效——但前提是项目文件@import在base.less之后 - 如果两个文件都用了
!default，且先后@import，后者仍会覆盖前者（因为前者已“被赋过值”） -
!default写在.mixin()内部无效，它只对顶层@变量起作用 - 构建时出现本地正常、线上还原默认色？可能是
less-loader并行处理多个入口，导致变量文件被拆进不同chunk，彼此不可见
嵌套规则里的&不影响变量查找路径
&只控制生成的选择器结构，和变量作用域完全无关。变量依然向上查找至文件顶层，而非&所代表的父选择器层级。
-
.btn { @size: 14px; &--large { font-size: @size; } &--small { @size: 12px; font-size: @size; } }→ 两个类最终都用12px - 需要每个子模块独立配置？要么拆成两个
.mixin()，要么用map存配置再取值，比如@config: (large: 14px, small: 12px);+font-size: map-get(@config, large); - 别指望
&__item { @spacing: 8px; }能给&__item创建专属变量空间——它照样会污染后续所有同名@声明
真正可控的“局部性”只来自.mixin()参数封装和@import (reference)的变量抽离。所有试图靠嵌套或&实现变量隔离的做法，都会在多文件协作或复杂组件复用时翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
