唯一安全写法是@primary-color: var(--primary-color, #007bff);，必须显式使用var()函数、声明于全局作用域、提供fallback；它生成运行时透传的原生css变量，而非静态值拷贝。
直接用 @primary-color: var(--primary-color, #007bff);，别绕弯。这是唯一既不报错、又能保持运行时动态性的写法。
Less变量怎么安全引用CSS变量
必须显式写 var() 函数，不能省略，也不能写成 --primary-color 或 @{--primary-color} —— 后者会被Less当作未定义变量报错，前者则被解析为非法标识符，最终编译为空或触发语法错误。
-
@primary-color: var(--primary-color, #007bff);是透传别名，不是值拷贝；每次渲染浏览器都会重新读取--primary-color当前值 - 这行必须声明在全局作用域（比如
variables.less顶部），嵌套在.dark {}里会导致编译失败 - fallback 必须显式提供，
var(--primary-color)没 fallback 时未定义会退化为inherit，可能造成意外透明或继承父级颜色 - 开发者工具里查不到
@primary-color，只能看到最终计算出的 CSS 值 —— 这不是失效，是 Less 已把它编译为原生var(--primary-color, #007bff)
为什么不能用Less变量给CSS变量赋值
写 --primary-color: @primary-color; 会直接报 ParseError: Syntax Error。Less 解析器根本不识别 -- 开头的自定义属性语法，也不允许在声明中混用预处理器变量和原生 CSS 变量。
- 唯一合法的字符串插值写法是
--primary-color: @{primary-color};，但这只是把@primary-color当前的静态值（比如#007bff）硬编码进 CSS，JS 调用document.documentElement.style.setProperty('--primary-color', 'red')完全无效 - 想让 JS 修改生效，CSS 变量必须由
:root显式声明，且值本身就得是var(--x)形式，不能是 Less 变量展开后的结果 - 常见错误：在
:root里写--primary-color: @primary-color;→ 编译直接失败
如何避免 -- 前缀引发的变量名冲突
Less 看到 --primary-color，第一反应是找 @--primary-color 这个变量 —— 它把 -- 当成非法前缀，不是 CSS 变量标识。结果要么报 NameError: variable @--primary-color is undefined，要么静默输出空 var()，浏览器直接丢弃整条样式声明。
- 必须用
~"var(--x)"才能原样透传：它告诉 Less “别碰这串字符，原样吐出去” -
~"var(--@{name})"❌ 不行，~""内部不支持插值，@{name}不会展开 - 要动态拼接，得先拼字符串再整体转义：
@var-name: "primary-color"; color: ~"var(--@{var-name})"; - 禁止裸名：
@--color、@--size看着像 CSS 变量，实则毫无意义 —— 既不是合法 CSS 变量（少var()），又不是可用 Less 变量（带--前缀），纯属陷阱
真正难处理的不是语法怎么写，而是你得同时盯住三件事：Less 变量何时定义、CSS 变量何时挂到 :root、JS 修改时是否拼对了连字符。漏掉任何一环，主题切换就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
