Less延迟加载不影响CSS变量，仅作用于编译期的@变量；CSS变量--x在运行时按DOM树查找，与Less变量无自动关联，混用会导致取值失败。
Less 的延迟加载本身不影响 CSS 变量（--custom-property）——它根本管不到运行时的 CSS 变量。真正出问题的地方，是开发者误把 Less 变量和 CSS 变量混用，又依赖 Less 的延迟加载逻辑去“猜” CSS 变量的行为。
Less 变量延迟加载只发生在编译期，和 CSS 变量无关
Less 的 @primary-color: #007bff; 是编译前文本替换，输出后就没了；而 --primary: #007bff; 是浏览器运行时解析的级联属性。两者生命周期完全隔离。你写 @color: red; .btn { color: var(--color); }，Less 不会、也不能把 @color 注入成 --color，除非手动拼字符串或用插值：.btn { --color: @{color}; }。
- 延迟加载只对
@xxx有效，对var(--xxx)零作用 -
var(--x)查找永远按 DOM 树向上找，和 Less 文件里哪行定义@x毫无关系 - 构建工具（如 Webpack）也不会自动把 Less 变量映射为 CSS 变量，那是额外配置或插件的事
为什么你会觉得“取值被影响”？其实是 import 顺序错位 + 混淆了两种变量
典型翻车场景：你在 theme.less 里写了 .btn { background: var(--primary); }，又在 variables.less 里定义了 @primary: #007bff;，还试图靠 Less 延迟加载让它“生效”。结果编译后 CSS 里还是 background: var(--primary);，但 HTML 中没挂 :root { --primary: ... }，于是全白。
- Less 编译器不会生成
:root { --primary: ... }，除非你显式写出来 - 如果真想用 Less 变量驱动 CSS 变量，得手动写：
:root { --primary: @{primary}; } - 这个
@{primary}才受延迟加载影响——但它必须在:root块之前或同文件内已定义，否则报variable @primary is undefined - 跨文件时，
@import "variables.less";必须出现在:root块之前，顺序错就直接编译失败
嵌套中重定义 @var 会意外覆盖 CSS 变量注入值
你可能这样写：
立即学习“前端免费学习笔记（深入）”；
.card {
--padding: @{padding};
@padding: 16px;
&__header { padding: var(--padding); }
&__body { @padding: 24px; }
}
结果 __header 里的 var(--padding) 取到的是 24px，不是预期的 16px。因为 @padding: 24px 在同一作用域更靠后，延迟加载让它覆盖了前面的 @padding: 16px，最终注入 --padding 的是 24px。
- 延迟加载让变量赋值“后声明胜出”，但你本意可能是局部差异化
- 这种写法本质是把 Less 变量当状态机用，极易失控
- 安全做法：用 mixin 封装，比如
.card-header(@p) { --padding: @p; padding: var(--padding); }，调用时传参 - 或者直接放弃注入，CSS 变量就该由 :root 或组件自身声明，不要靠 Less 变量间接控制
真正容易被忽略的点是：Less 延迟加载只解决“定义位置自由”，不解决“变量语义混淆”。当你同时用 @primary 和 --primary，它们之间没有自动桥接，也没有隐含优先级——谁先出现、谁被注入、谁被引用，全靠你手写控制，漏掉一行 @import 或一个 :root 声明，就断链。
