Less变量作用域是线性扁平的，无模块隔离；@import按顺序拼接内容，变量必须先定义后使用；嵌套中同名变量就近覆盖；多文件同名变量以最后导入为准；应统一单点定义、强制前缀、禁用裸名、人工控制导入顺序。
Less变量作用域混乱，根本不是“延迟加载”问题——@import不延迟、不隔离、不模块化，它只是按书写顺序把文件内容拼成一篇长文本。所有变量最终扁平合并进同一个编译作用域，先定义后使用是铁律，否则就报 Variable is undefined。
为什么@import顺序一错，变量就失效
Less不做运行时加载，@import语句在编译期被逐行展开，等价于把文件内容原样粘贴进来。变量必须出现在使用它的位置之前，否则编译器找不到定义。
- 错误写法：
@import "components/button.less"; @import "variables.less";→button.less里引用@primary-color时，它还没出现 - 正确顺序：所有
variables.less、mixins.less必须放在最前面，再导入组件文件 -
@import (once)只防同一文件重复引入，不改变变量注入顺序；@import (reference)也不解决冲突，它照样把变量注入当前作用域
嵌套里重声明@padding，为什么&__header也变了
Less没有块级作用域隔离，嵌套规则中重新声明同名变量会覆盖外层变量，影响后续所有引用——这不是“局部作用域”，而是就近覆盖。
- 翻车代码：
.card { @padding: 16px; &__header { padding: @padding; } &__body { @padding: 24px; padding: @padding; } }→&__header实际取到的是24px - 安全做法：用
.card-header(@p: 16px) { padding: @p; }封装，靠参数传值，不依赖变量赋值 - 更稳妥：用
map存配置，如@card-spaces: { header: 16px, body: 24px };，再用map-get(@card-spaces, header)取值
多个variables.less都定义@primary-color，谁生效
Less不做合并，只做线性覆盖：最后一个@import进来的定义胜出。这不是bug，是设计行为。
- 高危操作：在
button.less和modal.less里各自写@primary-color: #0056b3;→ 最终只保留后加载的那个 - 唯一解法：单点定义，统一放在
variables.less，且该文件禁止写任何样式规则或.mixin - 组件需定制？用
.btn(@bg: @primary-color) { background: @bg; }传参，而不是重写@primary-color - 真正容易被忽略的点：
javascriptEnabled开启后可能让JS变量意外混入，非调试场景建议关闭
变量名冲突不会报错，但会静默覆盖；浏览器开发者工具看不到变量来源，只有编译后的值；lessc --lint能查重复定义，但得用Less 4.0+。最省事的防线，就是禁用裸名、强制前缀、杜绝嵌套赋值、所有@import顺序人工可控——Less的作用域模型简单粗暴，适配它的唯一方式，是放弃“模块化幻想”，拥抱线性控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
