less变量无法运行时动态切换，因其在编译阶段即被替换为固定值；必须通过css自定义属性（如--primary-color）承接主题值，并由js在:root上修改，才能实现真动态换肤。
Less变量本身不支持运行时动态切换
Less是编译时预处理器，@primary-color这类变量在CSS生成阶段就被替换成固定值，最终输出的CSS里根本不存在变量。所谓“动态切换”必须靠外部机制配合，不能只靠Less写法。
常见误解是给@primary-color赋一个JS可改的值——这行不通，因为Less不解析JS，也不保留变量符号到浏览器运行时。
用CSS自定义属性（CSS Custom Properties）承接Less变量
把Less变量作为CSS自定义属性的“源头”，让主题色真正落地到:root里，这样JS才能读写、浏览器才能响应变化。
实操建议：
- 在Less中用
@primary-color: #007bff;定义设计系统基础值 - 用
:root { --primary-color: @primary-color; }导出为CSS变量 - 组件样式改用
color: var(--primary-color);而非直接写@primary-color - 避免在Less里对CSS变量做计算（如
lighten(var(--primary-color), 10%)），Less无法解析var()，会报错Cannot parse inline color
JS切换主题时只改CSS变量，不重载Less文件
运行时切换主题的本质，就是批量修改:root下的CSS变量值，不需要重新请求或编译Less文件。
示例操作：
document.documentElement.style.setProperty('--primary-color', '#28a745');
document.documentElement.style.setProperty('--bg-color', '#f8f9fa');
注意点：
- 务必用
document.documentElement（即:root），不是document.body - 颜色值要带单位或格式合法（如
#fff、rgb(0,0,0)、hsl(0,0%,100%)），否则CSS变量失效且无报错提示 - 如果主题包含大量变量（如阴影、圆角、断点），建议封装成对象批量设置，避免逐条
setProperty
主题切换后部分样式未更新？检查继承链和缓存
CSS变量是级联生效的，但某些场景下视觉没变，往往不是JS没执行，而是样式被覆盖或未继承。
排查方向：
- 用浏览器开发者工具检查目标元素计算后的
color、background等属性，看是否真取到了新变量值 - 确认有没有硬编码的颜色（如
color: #007bff;）混在CSS里，它会优先于var(--primary-color) - 如果用了CSS-in-JS库（如styled-components），确保它没有把样式内联固化，绕过了CSS变量响应
- 开发环境开启“禁用缓存”再测试，旧CSS文件可能被缓存，导致JS改了变量但样式还是旧的
最易忽略的是：CSS变量只在声明它的作用域生效，:root设了，不代表所有子元素自动继承——但color、background等属性默认继承，所以多数情况没问题；但border、padding这类不继承的属性，必须显式写var()才生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
