less变量无词法作用域，仅线性覆盖：后声明同名变量直接覆盖前值，无论嵌套或文件位置；&不影响变量查找，变量始终向上至文件顶层；隔离须用.mixin()传参或@import (reference)抽离。
Less变量没有“屏蔽”概念，只有线性覆盖——后声明的同名变量会直接覆盖前面所有定义，无论嵌套层级或文件位置。
Less里嵌套中重写@variable为什么会影响外部？
因为Less根本不存在词法作用域。.btn { @size: 14px; &--small { @size: 12px; } } 中的第二个 @size 不是“子作用域变量”，而是对同一全局符号的再次赋值。编译器按文本顺序处理，&--small 块里的 @size 定义出现在后面，它就成为整个文件中 @size 的最终值。
- 所有
@变量默认扁平、全局、线性生效 -
&只影响生成的选择器结构，和变量查找路径完全无关 - 想隔离？必须用
.mixin(@p: 14px) { font-size: @p; }显式传参，而不是裸写@size - 错误示例：
.card { @padding: 16px; &__body { @padding: 24px; } &__header { padding: @padding; } }→&__header实际取到的是24px
为什么@import顺序错位会导致Variable is undefined？
@import 不是模块加载，只是编译期文本拼接。变量必须在使用前被定义，否则报错 Variable @xxx is undefined。
- 错误顺序：
@import "button.less"; @import "variables.less";→button.less里引用@primary-color时，它还没出现 - 正确顺序：所有
variables.less、mixins.less必须放在最前面 -
@import (once)和@import (reference)都不改变变量注入顺序，只控制是否重复展开内容 - Webpack 或 Vite 并行编译多个入口时，可能把变量文件拆进不同 chunk，导致部分组件看不到变量——这不是作用域问题，是构建配置漏洞
!default不是作用域开关，而是“首次赋值守门员”
@primary-color: #007bff !default; 只在 @primary-color 尚未被任何地方赋过值时才生效。一旦某处写了 @primary-color: #dc3545;（哪怕在另一个文件），你的 !default 就彻底失效。
-
!default必须写在基础库变量文件里，项目级覆盖文件必须后@import - 两个文件都用
!default？后者仍胜出，因为前者已“被赋过值” -
!default写在.mixin()内部无效，它只对顶层@变量起作用 - Vue/React 单文件组件中的
<style lang="less"></style>是独立作用域，不会自动继承variables.less，必须靠additionalData或style-resources-loader注入
最容易被忽略的是：变量名冲突不会报错，只会静默覆盖；开发者工具里看不到变量来源，只能看到最终编译结果；lessc --lint 能查重复定义，但需 Less 4.0+。真正可控的局部性，只来自 .mixin() 参数封装和 @import (reference) 抽离，而非嵌套或 & 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
