Less编译时直接写var(--color)会报错，因其将var()误认为函数而非CSS原生语法；正确做法是用~"var(--color)"转义字符串绕过解析，确保原样输出供浏览器运行时处理。
Less编译时直接写 var(--color) 会报错
Less 解析器不认识 var() 是浏览器原生函数，会把它当 Less 函数调用，而 var 并非内置函数，结果就是编译失败，报类似 Unrecognised input 或 variable @--color is undefined 的错误。这不是 CSS 运行时问题，是 Less 在编译阶段就卡住了。
必须用 ~"var(--color)" 转义字符串绕过解析
Less 提供 ~"" 语法，表示引号内内容原样输出，不参与变量替换、函数求值或语法校验。这是唯一稳妥的写法：
color: ~"var(--primary)";background: ~"var(--bg, #fff)";padding: ~"calc(var(--gap) * 2)";
注意：~"" 里不能直接插 Less 变量，比如 ~"var(--@theme-color)" 会失败；如需拼接，得用字符串插值：~"var(--@{theme}-color)"（前提是 @theme: "primary"; 已定义）。
Less 变量如何安全引用 CSS 变量（如 @primary-color: var(--primary-color, #007bff);）
这行不是定义颜色，而是创建一个运行时透传别名，最终输出仍是原生 var() 函数：
- 必须显式带
var()和 fallback，@primary-color: --primary-color;或@primary-color: @{--primary-color};都会报错 - 必须声明在全局作用域（如
variables.less顶部），嵌套在.dark {}里会导致编译失败 - fallback 不可省略，否则未定义时可能退化为
inherit，造成意外透明或继承父级颜色 - 开发者工具里查不到该 Less 变量，只能看到最终计算出的 CSS 值——这是正常现象
不能用 Less 变量给 CSS 自定义属性赋值（如 --primary-color: @primary-color;）
Less 解析器不识别 -- 开头的声明语法，直接报 ParseError: Syntax Error：
- 唯一合法写法是字符串插值：
--primary-color: @{primary-color}; - 但注意：这只是把
@primary-color当前的静态值（如#007bff）硬编码进 CSS，后续 JS 调用document.documentElement.style.setProperty('--primary-color', 'red')完全无效 - 真正动态换肤必须靠运行时 CSS 变量 + JS 控制，而非 Less 编译期固化
最容易被忽略的是：~"var(--x)" 和 @x: var(--x, #000); 看似都用了 var()，但前者是纯输出，后者是透传别名——它们语义不同、作用域不同、调试表现也不同，混用容易导致样式行为不可预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
