less变量延迟加载仅限单文件内有效，跨文件依赖@import顺序；嵌套重声明会就近覆盖，多文件同名变量静默以最后导入为准；应统一单点定义、加前缀、禁嵌套赋值、用mixin或map替代全局变量。
Less 的变量延迟加载不是“先用后定义”的自由通行证，而是一把双刃剑：它允许跨作用域回溯查找，但一旦依赖它组织配置，就会和 @import 顺序、嵌套覆盖、多文件同名冲突直接撞上。真正能落地的灵活配置，靠的不是延迟加载本身，而是对它的约束性使用。
延迟加载只在单文件内有效，跨文件必须靠 @import 顺序控制
很多人误以为 @import "button.less"; @import "variables.less"; 也能让 button.less 用上 @primary-color，因为“Less 支持延迟加载”。错。延迟加载不跨文件——@import 是编译期文本拼接，button.less 被展开时，variables.less 还没出现，变量就根本不存在。
- 所有
variables.less、mixins.less必须放在所有组件文件之前 -
@import (once)或@import (reference)不改变拼接顺序，只影响是否生成 CSS 输出 - 用
lessc --lint（Less 4.0+）可提前发现Variable is undefined错误，但无法检查跨文件逻辑
嵌套中重声明变量会就近覆盖，延迟加载反而放大风险
写成这样看似聪明：.card { @padding: 16px; &__header { padding: @padding; } &__body { @padding: 24px; padding: @padding; } }。结果 &__header 拿到的是 24px。因为延迟加载会让所有引用都等到作用域末尾再解析，而变量赋值是顺序执行的，后赋的值覆盖前赋的值。
- 嵌套内不要用
@var: value;重定义同名变量 - 需要差异化配置？改用参数化
.card-header(@p: 16px) { padding: @p; } - 或用 map 存结构化配置：
@card-spaces: { header: 16px, body: 24px };，再通过map-get(@card-spaces, header)取值
多文件同名变量静默覆盖，延迟加载掩盖了问题根源
如果 button.less 和 modal.less 都写了 @primary-color: #0056b3;，最终生效的是后 @import 的那个——延迟加载不会帮你合并或报错，它只是老老实实取最后一个定义。
- 禁止在组件文件里定义主题变量，只允许在统一的
variables.less中单点声明 - 组件需定制颜色？用 mixin 参数传入：
.btn(@bg: @primary-color) { background: @bg; } - 启用
javascriptEnabled: false（默认关闭），避免 JS 环境变量意外混入编译上下文 - 变量名强制加前缀，比如
@btn-primary-bg、@modal-header-padding，杜绝裸名@color、@size
最容易被忽略的，是延迟加载带来的调试盲区：浏览器开发者工具里看不到变量来源，只有最终计算值；lessc 编译也不报重定义警告，除非你主动开 --lint。所谓“灵活”，其实是用严格约定换来的——禁用裸名、拒绝嵌套赋值、所有 @import 手动排序、变量只在顶层定义。这些不是限制，而是让延迟加载真正可控的护栏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
