less变量无词法作用域，所有@variable均为线性覆盖、全局生效；嵌套中重写@size实为对同一全局符号再次赋值，按文本顺序成为最终值，&只影响选择器生成，不改变变量查找路径。
Less 里的变量没有词法作用域，所有 @variable 都是线性覆盖、全局生效的——后定义的同名变量会直接覆盖前面所有定义，无论嵌套层级、文件位置或 & 结构。
为什么嵌套里重写@size会影响外部？
因为 Less 编译器根本不识别“嵌套作用域”。.card { @size: 16px; &__header { @size: 24px; } } 中的第二个 @size 不是局部变量，而是对同一全局符号的再次赋值。编译时按文本顺序处理，它成为整个文件中 @size 的最终值。
-
&只控制生成的选择器结构，和变量查找完全无关 - 所有变量查找都向上回溯到文件顶层，不进嵌套块“找父级”
- 错误示例：
.btn { @padding: 8px; &--lg { @padding: 16px; } padding: @padding; }→ 最终padding是16px，不是8px
如何安全地实现“局部变量”效果？
不能靠嵌套遮蔽，只能靠显式传参或命名隔离。
- 用
.mixin(@p: 12px) { font-size: @p; }封装逻辑，调用时传值：.btn { .mixin(14px); } - 禁止裸名变量：把
@color改成@btn-primary-color、@modal-header-bg - 基础变量必须收口到单一
variables.less，且该文件只定义、不写样式、不重定义 - Less 4.0+ 的
let()语法支持块级作用域，但浏览器兼容性差，生产环境慎用
@import 和 !default 的真实行为
@import 是纯文本拼接，!default 不是作用域开关，只是“首次赋值守门员”。
-
@primary-color: #007bff !default;只在@primary-color尚未被任何地方赋过值时才生效 - 一旦某处写了
@primary-color: #dc3545;（哪怕在另一个@import文件），!default就失效 -
@import (reference)不阻止变量注入，只跳过 CSS 输出；变量照样全局覆盖 - Webpack/Vite 并行编译多个入口时，
variables.less若被拆进不同 chunk，会导致部分组件看不到变量——这是构建配置问题，不是 Less 本身缺陷
最容易被忽略的是：变量冲突不会报错，只会静默覆盖；开发者工具里看不到变量来源，只能看到最终编译结果；lessc --verbose 也不提示覆盖警告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
