为什么Less中的变量无法在运行时的JavaScript中直接修改CSS？-css教程-PHP中文网

less变量无法在运行时被javascript修改，因其在构建阶段已被编译为固定值，浏览器中根本不存在；正确做法是用@primary-color: var(--primary-color, #007bff)桥接css变量，并通过document.documentelement.style.setproperty()动态更新。

为什么less中的变量无法在运行时的javascript中直接修改css？

Less变量无法在运行时被JavaScript修改，是因为它根本不会出现在浏览器里——所有@primary-color类的变量都在构建阶段被编译成固定值，最终输出的CSS里连变量名都不存在。

Less变量在编译期就被“蒸干”了

你写的@primary-color: #007bff;，经过lessc或less-loader处理后，所有引用它的位置（比如color: @primary-color;）都会直接替换成color: #007bff;。生成的CSS文件是纯静态的，没有变量、没有作用域、也没有运行时求值能力。

在开发者工具里搜索@primary-color，结果一定为空
getComputedStyle(document.body).getPropertyValue('@primary-color')永远返回空字符串
import './variables.less'在JS中会失败，Webpack不支持直接加载.less文件
调用less.modifyVars()只影响尚未编译的源码，对已加载的CSS完全无效

为什么`@{name}`拼不出合法的`var(--xxx)`

有人尝试用插值写@name: primary-color; color: var(--@{name});，看起来能编译出color: var(--primary-color);，但这只是字符串拼接，不是动态解析。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

如果@name来自函数计算（如extract()），Less 4.0+ 不支持运行时求值，插值会失败或报错
var(--@{name})在浏览器中会被当成无效语法丢弃，因为--@{name}不是合法的自定义属性名
安全写法永远是显式写死：color: var(--primary-color, #007bff);

正确桥接路径：Less → CSS变量 → JS

想让JS控制样式，唯一可靠方式是让Less放弃固化值，改用var(--xxx)做运行时求值，并由JS通过document.documentElement.style.setProperty()修改。

在variables.less顶部写：@primary-color: var(--primary-color, #007bff);
确保:root { --primary-color: #007bff; }被实际输出（可通过.export-variables() mixin导出）
JS修改只需一行：document.documentElement.style.setProperty('--primary-color', '#ff6b35');
读取时注意trim()：getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim()