Less变量仅存在于编译前，构建时被替换为静态值，运行时不存在，无法被JS读取或动态修改；CSS自定义属性（如--primary-color）才支持运行时换肤，需手动在:root中声明并用var()引用。
Less变量根本不在运行时存在
这不是读取失败，而是“无物可读”——@primary-color这类变量只存在于 Less 编译前的源码里，构建阶段就被替换成#007bff这样的静态值，最终 CSS 文件中连@primary-color这个符号都不存在。浏览器运行时根本看不到它，自然无法被var(--primary-color)或 JS 的getComputedStyle读取。
你写的--primary-color: @primary-color会直接报错
Less 解析器不识别--开头的声明语法，把它当非法标识符处理：
-
--primary-color: @primary-color;→ 报ParseError: Syntax Error -
--primary-color: @{primary-color};→ 合法，但只是把当前值硬编码进 CSS（比如输出--primary-color: #007bff;），后续 JS 调用document.documentElement.style.setProperty('--primary-color', 'red')完全无效 - 想让 CSS 变量真正动态，必须手写
:root { --primary-color: #007bff; }，再用var(--primary-color)引用
别指望 Less 变量能桥接运行时逻辑
Less 是纯编译期工具，和浏览器样式计算完全隔离。常见误解包括：
- 在
variables.less里写@primary-color: var(--primary-color, #007bff);→ 这行只是告诉 Less：“每次用@primary-color时，输出var(--primary-color, #007bff)”，它不读取、不绑定、不监听--primary-color的变化 - 以为改了
@primary-color就能触发 JS 重算 → 实际必须重新编译 Less、替换 CSS、重载样式，否则页面还是旧值 - 在 DevTools 的 Styles 面板里搜
--primary-color却找不到 → 因为那行根本没被 Less 输出过，除非你手动写了:root { --primary-color: ... }
