必须用~""才能编译通过的场景包括：calc()表达式、含@/空格/反斜杠的URL路径、IE Hack后缀、CSS自定义属性var(--x)及伪元素content中的attr()或counter()函数，漏掉则直接报错或生成错误值。
什么时候必须用 ~"" 才能编译通过
不是“想不想转义”，而是漏掉 ~"" 就直接报错或生成错误值。Less 解析器遇到某些符号会立刻尝试匹配语法结构，根本不会等你写完整条语句。
-
calc()表达式：calc(~"100% - 50px")✅；calc(100% - 50px)❌（会被算成calc(50%)） - URL 含
@、空格、反斜杠：url(~"assets/icon@2x.png")✅；url("assets/icon@2x.png")❌（@被当变量前缀） - IE Hack 后缀：
background: red<code>~"9"; ✅；background: red9;❌（9是非法转义序列，编译中断） - CSS 自定义属性：
color: ~"var(--primary)";✅；color: var(--primary);❌（--触发非法变量前缀报错）
~"" 里为什么不能写 @{var}
~"" 是“冻结区”：它跳过所有 Less 编译逻辑，包括变量插值、运算、函数调用。你写的任何东西都会原样输出到 CSS 中。
- 错误：
@path: "fonts/Inter.woff2"; src: url(~"fonts/@{name}.woff2");→ 输出url("fonts/@{name}.woff2")，变量没展开 - 错误：
@theme: "dark"; @prop: ~"var(--@{theme}-primary)";→ 输出var(--@{theme}-primary)，不是var(--dark-primary) - 正确做法：先拼字符串，再整体包裹：
@path: "fonts/Inter.woff2"; src: url(~"@{path}"); - 动态主题变量要两步走：
@theme: "dark"; @prop: ~"var(--@{theme}-primary)"; color: @{prop};
伪元素 content 中调用 attr() 或 counter() 必须用 ~""
content 值在 CSS 中分两类：带引号的字符串字面量（如 "text"），或无引号的函数调用（如 attr(data-label)）。Less 默认把双引号内内容当字符串处理，不识别函数语义。
- 想生成
content: attr(data-label);，必须写：content: ~"attr(data-label)"; - 写成
content: "attr(data-label)";→ 输出content: "attr(data-label)";（浏览器当普通字符串，不取属性值） - 变量插值要小心：
@label: "title"; content: ~"attr(data-@{label})";✅；但content: ~"attr(data-@{label})";不能写成content: ~"attr(data-@{label})";（重复写了） - 纯文本内容别误用
~""：@text: "Save"; content: "@{text}";✅；content: ~"@{text}";❌（输出content: Save;，无引号，浏览器报错）
路径和变量拼接时最容易忽略的两个点
~"" 不修正路径逻辑错误，也不保证运行时有效。很多 404 和样式失效，表面像转义问题，实则是路径计算或变量定义脱节。
- 路径是相对于**输出 CSS 文件位置**，不是 Less 源文件：
url(~"../fonts/inter.woff2")对应的是 CSS 所在目录向上一级找fonts/，不是 Less 文件所在目录 - Webpack/Vite 中资源常放
public/，应写url(~"/icons.svg")，而不是url(~"../public/icons.svg") -
var(--x)能编译成功 ≠ 浏览器能取到值：~"var(--primary)"不检查 :root 是否真定义了--primary，得靠 DevTools 查 computed 值确认 - 图标字体码点必须小写十六进制、无引号定义：
@icon-home: "e900"; content: ~"\@{icon-home}";；写成@icon-home: "\e900";会输出字面量\e900，浏览器不识别
真正危险的不是不会用 ~""，而是以为用了就万事大吉——它只管编译阶段的字符串逃逸，不管路径对不对、变量有没有定义、CSS 运行时是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
