less变量作用域是编译期线性合并+就近覆盖，无运行时模块隔离；@import仅为文本拼接，变量必须先定义后使用，嵌套中重声明会覆盖外层变量，多文件同名变量以最后导入为准，应单点定义并避免全局污染。
Less变量作用域混乱，根本不是“加载时机”问题，而是编译期线性合并 + 就近覆盖导致的——所谓“延迟加载”在Less里并不存在，@import只是文本拼接，没有运行时模块隔离。
为什么@import顺序一错，变量就失效
Less所有文件最终被扁平合并进一个作用域编译，@import语句按书写顺序展开，就像把多个文本块粘成一篇长文。变量定义必须出现在使用它的位置之前，否则就是Variable is undefined。
- 错误写法：
@import "components/button.less"; @import "variables.less";→button.less里引用@primary-color时，它还没被定义 - 正确顺序：所有
variables.less、mixins.less必须放在最前面 - 别信“
@import (once)能防重复”，它只防多次引入同一文件，不改变变量注入顺序
&嵌套里改变量，为什么父级样式也变了
&只控制选择器生成逻辑，不创建新作用域。在嵌套规则中重新声明同名变量，会覆盖外层同名变量，影响所有后续引用。
- 翻车代码：
.card { @padding: 16px; &__header { padding: @padding; } &__body { @padding: 24px; padding: @padding; } }→&__header实际用的是24px - 安全做法：用
.mixin封装局部配置，比如.card-header(@p: 16px) { padding: @p; }，避免直接赋值 - 更稳妥：用
map存配置（如@card-spaces: { header: 16px, body: 24px };），再用map-get()取值
多个文件都定义@primary-color，到底谁生效
Less不做合并，只做线性覆盖：最后一个@import进来的定义胜出。这不是bug，是设计行为。
- 高危操作：在
button.less和modal.less里各自写@primary-color: #0056b3;→ 最终只保留后加载的那个 - 唯一解法：单点定义，统一放在
variables.less，且该文件禁止写任何样式规则或.mixin - 组件需定制？用
.btn(@bg: @primary-color) { background: @bg; }传参，而不是重写@primary-color
真正容易被忽略的点：Less没有“模块作用域”，@import (reference)虽不输出CSS，但变量仍注入全局；javascriptEnabled开启后可能让JS变量意外混入，非调试场景建议关闭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
