CSS变量是桥接Less与JS的唯一标准方案，需在Less中通过mixin将@primary-color等导出为--primary-color等CSS自定义属性，再由JS通过document.documentElement读写。
Less变量编译后就消失了，JavaScript根本拿不到——这不是bug，是设计使然。要让JS能读写样式配置，必须把值“透出”到运行时环境，CSS变量就是最轻量、最标准的桥接方案。
为什么不能直接读Less变量
Less在构建阶段就把@primary-color替换成#4a6fa5，输出的CSS里根本没有这个符号。浏览器加载的是纯CSS，JS连影子都看不到。
- 常见错误现象：
getComputedStyle(document.body).getPropertyValue('@primary-color')返回空字符串 - 试图在JS里import Less文件，Webpack会报错或导入undefined
- 用
less.render()动态编译？成本太高，且无法与现有CSS cascade联动
用:root + var()把Less值导出为CSS变量
关键是在Less编译流程中，把设计变量“映射”成浏览器可读的--primary-color等自定义属性。
- 在
src/styles/variables.less末尾加一个导出规则：.export-variables() { --primary-color: @primary-color; --spacing-unit: @spacing-unit; } - 确保该mixin被调用，比如在
main.less里写.export-variables(); - 编译后生成的CSS里就会有
:root { --primary-color: #4a6fa5; }，JS就能读到了
JS读写CSS变量的正确姿势
读写必须作用于有该变量声明的作用域节点，通常是document.documentElement（即:root）。
立即学习“Java免费学习笔记（深入）”；
- 读取：
getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim()（注意trim()，否则可能带空格） - 写入：
document.documentElement.style.setProperty('--primary-color', '#dc3545')（必须带--前缀） - 不要写
document.body.style.setProperty——除非你在body上显式声明了该变量，否则不会生效 - IE不支持，如需兼容，得 fallback 到 class 切换方案
和Less变量保持同步的维护要点
这套桥接不是一劳永逸的，变量多了容易不同步。
- 命名要严格对应：Less里叫
@font-size-base，CSS变量就得叫--font-size-base，别缩写或改大小写 - 避免在CSS里重复声明同名变量——比如
:root和.dark-theme都设--primary-color，后者会覆盖前者，但JS读的仍是:root上的值，除非你主动切换作用域 - 构建时检查输出CSS是否真包含
:root { --xxx: ... }，别只信Less文件里写了.export-variables()
真正难的不是写几行setProperty，而是让设计系统、Less源码、CSS输出、JS逻辑这四层变量命名和更新节奏始终咬合。一旦松动，主题切换就变成玄学调试。
