less 解析器不支持 css 自定义属性语法 var(--x)，会因 -- 非法前缀报错或输出空值；正确写法为 ~"var(--x)" 或 @var: var(--x, fallback) 且须声明于全局顶层。
直接写 var(--primary) 会被 Less 解析器当成变量插值语法来处理，而 -- 不是合法的 Less 变量前缀，所以必然报错或输出空值——这不是 CSS 层的问题，是 Less 在编译阶段就卡住了。
为什么 var(--x) 会触发 ParseError 或静默输出空值
Less 解析器看到 -- 开头的标识符，会尝试匹配变量语法（比如找 @x），但 --x 不符合变量命名规则，既不是 @ 开头，也不是合法插值形式。结果就是：要么抛 ParseError: Unrecognised input，要么跳过、输出 var() 空括号。
- 写了
color: var(--primary);却编译成color: var();→ 典型解析失败表现 - 如果恰好定义了
@primary: #007bff;，Less 可能错误替换成var(#007bff)→ 非法 CSS，浏览器忽略 - 没定义
@primary，也不会“放过”它——解析器不识别--，直接中断该表达式处理
正确写法只有两种：~"var(--x)" 或 @var: var(--x, #000);
前者是原样透传字符串，后者是用 Less 变量安全引用 CSS 原生变量。两者语义完全不同，不能混用。
-
~"var(--primary)"：强制 Less 别解析，原样输出var(--primary)；不支持插值，~"var(--@{name})"是无效的 -
@primary-color: var(--primary-color, #007bff);：这是把原生变量赋给 Less 变量，必须写全var()函数，且 fallback 必须显式声明 - 漏掉 fallback（如写成
@primary-color: var(--primary-color);）→ 浏览器未定义时退化为inherit，可能造成意外透明
为什么在嵌套块里写 @primary-color: var(--primary-color); 会报错
Less 要求这种运行时透传变量必须声明在全局作用域，也就是所有 @import 和顶层规则之前。嵌套在 .dark { } 或 .btn { } 里，编译器会报 NameError，因为它只允许在根级上下文定义这类别名。
- 错误位置：
.theme-dark { @primary-color: var(--primary-color); }→ 编译失败 - 正确位置：入口文件
main.less最顶部，且在任何@import之后、任何选择器之前 - Vue 单文件组件中
<style lang="less"></style>是独立编译上下文，必须显式@import或用style-resources-loader注入，否则@primary-color就是 undefined
最容易被忽略的一点：Less 编译器不管 --primary 这个 CSS 变量在运行时是否存在。它只负责把 var(--primary) 原样塞进 CSS。如果浏览器里根本没定义这个变量，样式照样“编译成功”，但最终渲染为空白或继承值——这种问题不会在 Less 阶段暴露，得靠人工核对或运行时调试工具抓。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
