less变量无法运行时切换，必须用@color: var(--primary-color, #007bff)桥接css变量，再由js修改:root上的--primary-color触发重渲染；因less在构建期已将@xxx全部替换为静态值，运行时无变量可读，故直接改less变量或嵌套定义均无效。
Less变量和CSS变量根本不在同一层——前者编译期就没了，后者运行时才起作用。想让它们“协同”，不是让Less去读CSS变量，而是用@color: var(--primary-color, #007bff)这种写法，把CSS变量的求值能力“借”给Less变量名，再靠JS改:root上的--primary-color触发重渲染。
为什么@primary-color: #007bff无法响应主题切换
Less在构建阶段就把所有@xxx替换成固定值，比如background: @primary-color最终生成的是background: #007bff。浏览器运行时根本看不到@primary-color，JS改document.documentElement.style.setProperty('--primary-color', '#222')对它完全没影响。
- 常见错误：
.dark { @primary-color: #222; }写在Less里毫无意义，编译后不会生成任何对应CSS规则 - 变量作用域陷阱：
.theme-dark { @bg: #111; }中的@bg只在该块内有效，且仍是编译期静态值 - 调试盲区：DevTools里查不到
@xxx，只能看到最终CSS值，误以为“没生效”，其实是它压根没参与运行时流程
@color: var(--primary-color, #007bff)才是正确桥接方式
这行不是定义Less变量，而是把CSS变量的运行时求值能力“借给”Less，让@color成为var(--primary-color, #007bff)的别名——每次渲染都重新读取--primary-color当前值。
- 必须写在全局作用域（如
variables.less顶部），不能嵌套在.dark{}里，否则编译报错variable is undefined - 不能省略
var()：写成@color: --primary-color是错的，浏览器不认识这个语法 - fallback要显式写：
@color: var(--primary-color, #007bff)，否则--primary-color未定义时会退化为inherit或transparent - 示例：
@primary-color: var(--primary-color, #007bff); .btn { background-color: @primary-color; }→ 编译后就是.btn { background-color: var(--primary-color, #007bff); }
CSS变量必须挂载在:root或html上才能被继承
Less变量桥接只解决“引用”问题，真正的动态切换依赖CSS变量的继承机制。如果把--primary-color定义在某个组件内部，子元素根本拿不到。
- 基础定义：
:root { --primary-color: #007bff; --bg-color: #fff; }，.dark { --primary-color: #222; --bg-color: #111; } - 切换方式二选一：
— 改class：document.documentElement.classList.toggle('dark')（推荐，语义清晰）
— 改data-theme：document.documentElement.setAttribute('data-theme', 'dark')，配合:root[data-theme="dark"]选择器 - 组件中必须统一用
var(--xxx)，不能直接写@color-bg-dark，否则无法被JS动态切换
最容易被忽略的一点：桥接写法只让Less“转发”CSS变量，但:root上的变量定义、JS触发时机、以及组件是否真正依赖var()而非静态值，三者缺一不可。漏掉任何一个，主题切换就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
