less变量与css自定义属性名撞车会导致编译出错或样式失效，因less将--视为非法前缀；必须用~"var(--x)"透传，且css变量需在:root初始化并由js通过setproperty动态修改。
Less变量和CSS自定义属性名字撞车，为什么编译后全变空？
因为Less解析器看到--primary-color，第一反应是找@--primary-color这个变量——它把--当成非法前缀，不是CSS变量标识。结果要么报NameError: variable @--primary-color is undefined，要么静默输出var()，浏览器直接丢弃整条样式声明。
必须用~"var(--x)"才能原样透传
这是唯一轻量、可靠的方式：波浪号告诉Less“别碰这串字符，原样吐出去”。
-
~"var(--primary-color)"→ 编译后就是var(--primary-color)，浏览器能认 -
~"var(--@{name})"❌ 不行，~""内部不支持插值，@{name}不会展开 - 要动态拼接，得先拼字符串再整体转义：
@var-name: "primary-color"; color: ~"var(--@{var-name})";
想让JS运行时改主题色，别依赖@primary-color，改用var(--x)桥接
Less变量在构建期就固化成#007bff，JS根本改不了。真正可行的是让Less变量“退居二线”，只负责初始化CSS变量：
- 在
:root或variables.less顶部写：@primary-color: var(--primary-color, #007bff); - 所有样式都用
color: @primary-color;，实际生效的是var(--primary-color, #007bff) - JS只需一行：
document.documentElement.style.setProperty('--primary-color', '#ff6b35'); - 四层命名必须完全一致：
@primary-color/--primary-color/--primary-color——错一个连字符就断链
Less 4.x里变量覆盖还是静默的，--开头的名字照样会撞
Less变量作用域仍是扁平线性，@--primary-color这种写法虽然能定义，但和@primary-color一样，会被后定义者静默覆盖。更麻烦的是，它既不是合法CSS变量（少var()），又不是可用Less变量（带--前缀），纯属陷阱。
- 禁止裸名：
@--color、@--size看着像CSS变量，实则毫无意义 - 所有公共变量必须统一收口到
variables.less，且只允许该文件定义 - 检查重复定义用
lessc --lint（Less 4.0+支持） - Webpack中
less-loader可能并行加载多个入口，导致variables.less被反复注入，变量被多次覆盖
:root、JS修改时是否拼对了连字符。漏掉任何一环，主题切换就失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
