Less变量与CSS变量同名不直接干扰但易引发语义混淆；前者构建时静态替换，后者运行时解析；混用会导致语法错误，需用@{}插值赋值且丧失动态性。
Less变量和CSS变量同名时会互相干扰吗
不会直接干扰，但会引发语义混淆和维护陷阱。Less变量@primary-color和CSS变量--primary-color是完全独立的两个东西：前者在构建时被静态替换，后者在浏览器里运行时才解析。编译器根本不会把--primary-color当变量看，也不会报错——它只当普通字符串处理。
常见错误现象是开发者写了--primary-color: @primary-color;，结果报ParseError: Syntax Error。因为Less解析器不认识--前缀，也不允许在属性声明里混用预处理器变量和原生CSS自定义属性。
同名但想共存，必须用@{}插值硬编码
如果非要在CSS变量里塞入Less变量的值，唯一合法写法是字符串插值：--primary-color: @{primary-color};。注意三点：
- 必须用
@{}，不能用@直接引用 -
@{primary-color}必须出现在冒号右侧（即值的位置），不能放在属性名位置 - 这相当于把值“拍平”进最终CSS，
--primary-color从此失去运行时可变性——JS调用document.documentElement.style.setProperty('--primary-color', 'red')对它无效
嵌套中引用CSS变量必须透传，不能参与Less运算
在Less嵌套规则里写color: var(--primary-color);完全合法，它会被原样输出到CSS。但你不能对它做任何Less层面的操作：
- 不能写
lighten(var(--primary-color), 10%)——Less不识别var()返回值，会报错或静默失败 - 不能写
@{--primary-color}试图插值——--primary-color不是合法Less变量名，解析直接崩 - 若需颜色衍生，只能基于
@primary-color计算，再把结果赋给另一个CSS变量（如--primary-light）
真正需要动态主题时，别强行让Less变量“接管”CSS变量
最常被忽略的一点是：同名只是表象，职责根本不同。Less变量适合构建时分支（比如theme-dark.less和theme-light.less分别编译），而CSS变量才是运行时切换的基础设施。
强行用@{primary-color}注入--primary-color，等于把运行时能力锁死在构建时刻。一旦项目需要热切主题、用户偏好读取、或服务端动态主题，这条路就走不通了。这时候应该让CSS变量彻底脱离Less控制，由JS或HTML 块统一注入，Less只负责结构和占位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
