必须用~""才能通过编译的场景包括：calc()表达式、含@/空格/反斜杠的URL路径、IE Hack后缀、含引号或]的复杂选择器、CSS自定义属性var(--x)；~""是冻结区，内部不支持@{var}插值，变量需先拼接再包裹。
Less 里遇到特殊字符报错，不是“要不要转义”的问题，而是“不加 ~"" 就编译不过”——它不是可选项，是硬性语法要求。
哪些地方必须用 ~"" 才能通过编译
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✅；~"9";background: red9;❌（9是非法转义序列） - 复杂属性选择器含引号或
]：~"[data-title="Hello World"]"✅；[data-title="Hello World"]❌（引号和空格触发解析异常）
~"" 内部不能写变量，拼接得提前做完
~"" 是“冻结区”：里面不支持 @{var} 插值，也不识别运算符。想动态生成带特殊字符的值，必须先在外部拼好字符串，再整体包裹。
- 正确：
@path: "fonts/Inter-Italic.woff2"; src: url(~"@{path}"); - 错误：
src: url(~"fonts/@{name}.woff2");→ 输出字面量url("fonts/@{name}.woff2")，变量没展开 - 错误：
~"url(@{path})"→ 整个字符串被原样输出，连url()都没了
处理 CSS 自定义属性 var(--x) 的典型陷阱
Less 看到 -- 会当成非法变量前缀，直接报错或静默忽略。你写的 color: var(--primary); 很可能编译成 color: var(); 或直接中断。
- 必须写成：
color: ~"var(--primary)"; - 如果要动态拼变量名，比如主题前缀：
@theme: "dark"; @prop: ~"var(--@{theme}-primary)";→ 先拼再包，不能把@{theme}放进~""里 - 注意：即使拼出来的是
--dark-primary，但 CSS 里没定义这个变量，浏览器照样不报错——这问题~""帮不了你，得靠人工核对或运行时检查
路径问题常被误认为是转义问题
~"" 只解决编译阶段的字符串解析，它不修正路径逻辑错误。很多 404 不是因为特殊字符，而是相对路径失效。
-
url(~"../images/logo.png")是按 Less 源文件位置写的，但最终 CSS 可能在/dist/css/下，相对路径已错 - Webpack +
less-loader中，资源放在public/，应写url(~"/icons.svg")，而不是url(~"../public/icons.svg") - 验证方法：打开编译后的
.css文件，复制url()里的完整路径，粘到浏览器地址栏看能否直连资源
真正麻烦的从来不是怎么加 ~""，而是改完一个地方，发现其他地方的路径、变量拼接、CSS 合法性全得跟着重验——它是个开关，不是万能胶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
