less解析器不支持css原生var(--x)语法，必须用~"var(--x)"强制转义以避免编译错误；所有版本均要求对var()、calc()等含特殊字符的值使用~""包裹。
Less解析器把var(--x)当成变量或函数，根本不是CSS原生语法
Less编译阶段就报错，比如ParseError: variable @--x is undefined或Unrecognised input，说明它压根没把var(--x)当CSS看。它先尝试按自身规则匹配：--x不是合法Less变量名（变量必须以@开头），var()又不是内置函数，直接卡死。
~"var(--x)"是唯一可靠写法，不是可选项而是必需项
用~""告诉Less：“别解析，原样吐出去”。浏览器运行时才真正处理var(--x)。
- ✅ 正确：
color: ~"var(--primary)";、padding: ~"calc(var(--gap) * 2)"; - ❌ 错误：
color: var(--primary);（编译失败）、color: ~"var(--@{theme})";（@{theme}在引号内不展开） - ⚠️ 带默认值也一样：
background: ~"var(--bg, #fff)";，括号和逗号都得包进去
想动态拼接变量名？得先插值再转义，顺序不能错
比如主题色名来自参数@theme: "primary";，你要生成var(--primary-color)，不能写~"var(--@{theme}-color)"——这会失败，因为@{theme}在~""里不生效。
- 正确步骤：
@full-var: "--@{theme}-color";，再color: ~"var(@{full-var})"; - 或者更直接：
color: ~"var(--@{theme}-color)";——注意这里@{theme}在引号外，~""只包裹最终字符串 - 千万别在
~""里调replace()或unit()，那些函数在引号里纯属摆设
别信“新版Less不用转义”这种说法，兼容性陷阱很实在
Less 3.5+确实简化了媒体查询等场景，但var(--x)至今没被语法层支持。哪怕你用最新版lessc，漏掉~""照样编译失败。
- 真实情况：所有版本的Less都要求对
var()、calc()、url()含特殊字符等场景强制转义 - 容易忽略的点：
border-radius里的/、选择器里的.或:，同样得用~""兜底，反斜杠\转义多数时候无效 - 最省心的做法：只要值里含
--、calc、url(、@media等非纯CSS字面量，一律套~""
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
