Less中直接写var(--x)会报错或输出空值，因其解析器将--视为非法变量前缀，尝试匹配不存在的@--x变量，导致NameError或静默输出var()；必须用~"var(--x)"转义才能原样输出CSS原生变量。
Less里直接写var(--x)为什么会报错或输出空值
Less解析器把--当成非法变量前缀，不是CSS自定义属性的起始标识。它会尝试匹配@--x这种不存在的Less变量，结果要么报NameError: variable @--x is undefined，要么静默忽略、输出var()或空白值。哪怕你写了color: var(--primary);，编译后大概率变成color: var();，浏览器直接丢弃整条声明。
必须用~"var(--x)"转义才能原样输出
这是最轻量、最可靠的解法：用波浪号~包裹字符串，告诉Less“别解析，原样吐出去”。~"var(--primary)"编译后就是var(--primary)，浏览器能正常识别。
-
~"var(--primary)"✅ 正确，强制透传 -
var(--primary)❌ 报错或空值 -
~"var(--@{name})"❌~""内部不支持插值，@{name}不会展开 - 如果要动态拼接，得先拼字符串再整体转义：
@var-name: "primary"; color: ~"var(--@{var-name})";
想让JS运行时修改样式？别依赖@primary-color，改用var(--x)桥接
Less变量在编译期就被替换成固定值，JS根本接触不到。想换主题色，不能改@primary-color，而要让Less引用CSS变量：
- 在
:root或variables.less顶部写：@primary-color: var(--primary-color, #007bff); - 所有颜色声明都用
color: @primary-color;，这样实际生效的是var(--primary-color, #007bff) - JS修改只需一行：
document.documentElement.style.setProperty('--primary-color', '#ff6b35'); - 四层命名必须完全一致：Less里叫
@primary-color，CSS变量就得是--primary-color，JS里也得用--primary-color——错一个连字符就断链
IE兼容性问题不能靠Less解决，得手动过滤或降级
Less不负责语法兼容性检查。var(--x)、gap、grid这些IE全系不认的语法，Less照单全收、原样输出。你在Less里写了，最终CSS里就有，IE直接忽略整条规则，甚至导致后续样式失效。
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具Elements面板看哪些CSS声明被划掉（strikethrough），重点盯
var()、display: grid、aspect-ratio - IE8–IE9的Hack必须用
~"9"包裹，background: red@ie9;；裸写9会导致编译中断 - 别指望Less自动降级——需要PostCSS插件（如
postcss-custom-properties）或构建时条件编译
var(--x)不是“变量”，而是字符串拼接；它能否生效，完全取决于最终生成的CSS是否合法、浏览器是否支持、以及CSS变量是否已被正确设置。编译阶段的转义只是第一步，后续的运行时绑定和兼容性兜底，一个都不能少。 
