如何修复Less编译时无法正确识别CSS自定义属性（变量）的问题？-css教程-PHP中文网

less中直接写var(--x)会报错或输出空值，因其解析器将--视为非法变量前缀，尝试匹配不存在的@--x变量，导致nameerror或静默输出var()；必须用~"var(--x)"转义才能原样输出css原生变量。

如何修复less编译时无法正确识别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)，浏览器能正常识别。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

~"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）或构建时条件编译