Less变量无法运行时切换，必须用@primary-color: var(--primary-color, #007bff)桥接CSS变量，再由JS修改:root或html上的类或属性触发重计算；因Less在构建期已将@xxx全部替换为静态值，运行时无变量可读。
Less变量本身不能运行时切换，必须用var(--xxx)桥接原生CSS变量，再由JS控制:root或html上的属性/类触发重计算——这是唯一可行路径。
为什么@primary-color: #007bff无法响应主题切换
Less在构建期就把所有@xxx替换成固定值，比如background: @primary-color编译后就是background: #007bff。浏览器运行时根本看不到变量，JS改任何东西都无效。
- 常见错误：
.dark { @primary-color: #222; }写在Less里毫无作用，编译后不会生成对应规则 - 变量作用域陷阱：
.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); }
如何让--primary-color真正可变
CSS变量必须定义在能被继承的祖先节点上，且需用JS控制变更时机和范围。最稳妥的是挂载到:root或html元素。
立即学习“前端免费学习笔记（深入）”；
- 基础定义：
: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"]选择器 - 注意：变量必须定义在
:root或html上，定义在.app或某个组件内部会导致子元素无法继承
最容易被忽略的一点：Less变量桥接CSS变量只解决“引用”问题，真正的动态切换依赖JS对:root的修改+浏览器的级联重计算机制——漏掉任一环，样式都不会变。
