Less变量插值在url()中报错的根本原因是@{var}必须置于引号内且不可被~包裹，否则插值失效或字面输出；正确写法为url("@{path}/file.png")，需引号包裹、禁用~、禁用+拼接，外部URL才用~透传。
Less 变量插值在 url() 中报错，根本原因不是语法写错了，而是插值位置或包裹方式违反了 Less 编译器的解析规则——@{var} 必须出现在引号内、且不能被 ~ 包裹，否则会被跳过或字面输出。
url() 里用 @{var} 报错的典型现象
常见错误写法会导致编译失败或生成无效 CSS：
-
background: url(~"@{img-path}/logo.png");→ 编译后变成background: url("@{img-path}/logo.png");，浏览器不认识@{img-path} -
background: url("@{img-path}" + "/logo.png");→+不是字符串拼接符，Less 直接报语法错误 -
background: url(~@img-path);→~后面必须紧跟引号，不支持变量裸调用
正确写法：引号包裹 + @{var} 内联，不加 ~
~ 是用来透传原始 URL（如外部 CDN）的，而变量插值必须走 Less 的字符串拼接流程，所以要让插值生效，就得让 Less 先解析变量、再拼接、最后输出完整路径。关键点：
- 变量名必须用
@{xxx}形式，且整个url()值用双引号或单引号包裹 - 不要在引号外加
~，否则插值被禁用 - 路径拼接只能靠
@{a}@{b}或@{a}"/sub.png"这种方式，不能用+
示例：
@img-base: "../assets/images";
.logo {
background: url("@{img-base}/logo.png");
}
.icon {
background: url("@{img-base}/icon@2x.png");
}
需要 ~ 的场景和不需要 ~ 的场景怎么分
一句话判断：你希望 Less “执行变量替换”，就不用 ~；你希望 Less “完全不处理、原样输出”，才用 ~。
- 本地路径拼接（含变量）→ 不用
~：url("@{path}/file.css") - 外部 URL（https://）→ 必须
~：@import url(~"https://fonts.googleapis.com/...") - 含特殊字符的本地路径（如空格、
@、反斜杠）→ 必须~：src: url(~"fonts/Inter\ 300.woff2")，但注意此时不能再用@{var}
容易忽略的细节：嵌套 mixin 中的插值失效
如果把 url("@{base}/x.png") 写在 mixin 里，而 @base 是在调用处传入的参数，要注意作用域是否可达：
- mixin 定义时没声明参数默认值，调用又没传，
@{base}就是 undefined - mixins 不会自动继承父级作用域变量，必须显式传参或用
!important覆盖（不推荐） - 别在
~""里写@{var}，它压根不解析插值，只会当纯文本输出
真正安全的做法是：所有参与路径拼接的变量，都在使用前确认已定义、类型为字符串、无空格或非法字符；外部 URL 则坚决用 ~，但放弃插值幻想。
