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-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

• 读取：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逻辑这四层变量命名和更新节奏始终咬合。一旦松动，主题切换就变成玄学调试。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南