Less变量作用域与CSS变量作用域无关，前者编译时替换，后者运行时沿DOM向上查找最近有效声明；局部主题需用mixin生成带--xxx声明的容器规则，而非重定义Less变量。
Less变量作用域不等于CSS变量作用域，别混用
Less里的@primary-color在编译时就被替换成#007bff，输出的CSS里根本没--primary-color；而浏览器运行时读取的var(--primary-color)，和Less变量完全无关。想实现“局部主题覆盖”，不是让Less去改CSS变量，而是用Less生成带新--xxx声明的CSS规则——本质是控制输出内容，不是控制变量本身。
局部CSS变量必须直接写在容器选择器上
常见错误是写:root { --bg-color: #1a1a1a; }再套个.theme-dark前缀，这无效：:root只匹配，加前置类名不会让它生效。真正起作用的是：
-
.card { --bg-color: #2d2d2d; }——子元素调用var(--bg-color)时，会沿DOM向上找到这个声明 -
button { --text-color: #333; } button:hover { --text-color: #d32f2f; }——hover状态切换变量值 - 别在伪类里单独声明：如
button:hover { --text-color: red; }只影响::before等伪元素，不影响button span
用mixin封装局部变量声明，避免污染全局
不能靠裸写@bg-color: #2d2d2d;来“覆盖”，因为Less变量没有DOM继承链概念，且嵌套中重复定义会直接覆盖父级值（比如&__body { @padding: 24px; }会让&__header也拿到24px）。正确做法是：
- 写一个带参数的mixin：
.set-theme-vars(@bg: #fff, @text: #000) { --bg-color: @bg; --text-color: @text; } - 在容器上调用：
.card { .set-theme-vars(#2d2d2d, #e0e0e0); } - 禁止在嵌套块里无参数重定义
@xxx，例如&__body { @bg-color: #2d2d2d; }会污染同文件后续所有@bg-color引用 - 别用
!default试图控制--xxx，它只对Less编译期变量有效，对CSS变量完全无效
调试时盯紧Computed面板里的“自定义属性”来源
浏览器DevTools的Computed面板搜--bg-color，点开小箭头能看到值来自哪条CSS规则、是否被划掉、继承路径是否中断。最关键的是：变量查找只认DOM祖先链上的**最近有效声明**，和选择器权重无关，但和CSS源顺序强相关——后加载的CSS文件里的--xxx声明，会覆盖先加载的，哪怕选择器更简单。这点最容易被忽略，尤其在动态import或split chunk场景下，局部主题样式可能被无意打断。
立即学习“前端免费学习笔记（深入）”；
