less编译时直接写var(--color)会报错，因其将var()误认为函数而非css原生语法；正确做法是用~"var(--color)"转义字符串绕过解析，确保原样输出供浏览器运行时处理。
Less编译时直接写var(--color)会报错
Less默认把var(--color)当成函数调用，而var不是Less内置函数，所以编译会失败，报类似Unrecognised input或variable @--color is undefined的错误。这不是浏览器问题，是Less解析器在编译阶段就卡住了。
根本原因是：Less语法层不识别CSS原生自定义属性的--前缀和var()函数，它试图按自己的变量规则（@xxx）去解析，结果匹配不上。
- ❌ 错误写法：
color: var(--primary); - ✅ 正确写法必须让Less“跳过解析”，交由浏览器运行时处理
用~"var(--color)"转义字符串绕过Less解析
Less提供~""语法，表示把引号内内容原样输出为CSS，不作任何变量替换或函数求值。这是最常用、最稳妥的兼容方式。
- ✅ 正确写法：
color: ~"var(--primary)"; - ✅ 带默认值也一样：
background: ~"var(--bg, #fff)"; - ✅ 可嵌入计算式：
padding: ~"calc(var(--gap) * 2)";
注意：~""里不能插Less变量，比如~"var(--@theme-color)"会失败——因为@theme-color在引号里不会被展开。如需拼接，得用字符串插值：~"var(--@{theme}-color)"（前提是@theme已定义为字符串，如@theme: "primary";）。
为什么不用#{}或escape()
#{}是旧版Less（v1.x）的插值语法，新版已弃用，且行为不稳定；escape()只对URL等特殊场景有效，对var()无作用。强行用它们，要么编译失败，要么输出成字面量escape("var(--x)")，完全不是想要的CSS。
- ❌
color: #{"var(--primary)"};→ 编译报错或生成无效CSS - ❌
color: escape("var(--primary)");→ 输出color: escape("var(--primary)"); - ✅ 唯一可靠路径就是
~"..."
混合（mixin）中封装var()要格外小心
如果想把var(--color)逻辑抽成mixin复用，不能直接写color: var(--c);，必须用~""包裹，并显式传入变量名字符串。
.use-var(@prop, @var-name, @fallback: none) when (@fallback = none) {
@{prop}: ~"var(--@{var-name})";
}
.use-var(@prop, @var-name, @fallback) {
@{prop}: ~"var(--@{var-name}, @{fallback})";
}
调用：.use-var(color, primary, #333); → 输出color: var(--primary, #333);
这里容易漏掉的是@{var-name}的插值写法——少了@{}，--@var-name会被当字面量，得不到你定义的@primary: "brand";这类变量值。
真正麻烦的不是语法本身，而是团队协作时有人忘了加~""，或者把@{}写成@，导致编译通过但CSS失效。建议在项目里统一用mixin封装，杜绝裸写var()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
