less 中直接写 var(--x) 会出错，因其解析器将 -- 视为非法变量前缀，导致报错或输出空值；正确写法是用 ~"var(--x)" 转义，或通过 mixin 统一管理以提升可维护性。
var(--primary) 这类写法在 Less 里不能直接写，否则会被当成 Less 变量插值（比如试图读 @primary），而你真正想要的只是原样输出 CSS 原生自定义属性引用。
Less 中直接写 var(--x) 为什么会出错
Less 解析器看到 --x 会尝试匹配变量语法，但 -- 不是合法的 Less 变量前缀，所以要么报错，要么静默忽略、输出空值。更常见的是：你写了 color: var(--primary);，结果编译后变成 color: var(); 或直接报 ParseError。
- Less 默认把
--当作无效标识符前缀，不识别为 CSS 自定义属性起始 - 如果你之前定义了
@primary: #007bff;，Less 甚至可能错误地把它替换成var(#007bff)，这根本不是合法 CSS - 即使没定义
@primary，Less 也不会“放过”它——它会尝试解析并失败，而不是透传
必须用 ~"var(--x)" 而不是 ~"var(--@{x})" 的场景
当你需要动态拼接变量名（比如主题色名来自参数），就得先拼字符串、再整体转义。直接在 ~"" 里写 @{x} 是无效的——~"" 内部不支持插值。
- 错误：
color: ~"var(--@{theme}-primary)";→ 输出color: var(--@{theme}-primary);（字面量，未替换） - 正确：
@full-name: "--@{theme}-primary"; color: ~"var(@{full-name})"; - 更常用的是封装 mixin：
.use-var(color, @theme + "-primary", #333);，配合@{prop}: ~"var(--@{var-name}, @{fallback})"; - 注意
@{var-name}外层必须有@{}插值语法，漏掉就变成字面量--var-name
~"var(--x)" 和 .use-var() mixin 的性能与可维护性差异
两者最终都输出相同 CSS，但维护成本不同。裸写 ~"var(--x)" 看似简单，实际容易散落各处、漏 fallback、难统一修改。
- 硬编码
~"var(--primary, #007bff)"在多个文件出现 → 主题色改名时得全局搜，还可能漏掉没写 fallback 的 - mixin 方式强制结构化：
.use-var(background-color, bg-header, #f8f9fa);，一眼看出用途和兜底值 - 所有
var()引用都走同一套逻辑，后续加 RTL 支持、CSS 层级降级（比如 fallback 到rgb()）只需改 mixin 体 - 构建时无性能差异——都是编译期字符串拼接，不产生运行时开销
最易被忽略的一点：Less 里的 ~"" 只管“别解析”，不管“是否合法”。如果你拼出来的 --@{theme}-primary 最终是 --dark-primary，但 CSS 里根本没定义这个变量，浏览器照样静默忽略——这问题不会在 Less 编译时报出来，得靠人工核对或运行时调试工具抓。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
