Less中必须用~""包裹的场景包括：calc()表达式、含@/空格/反斜杠的URL路径、IE Hack后缀（如"9"）、复杂属性选择器；~""内不支持变量插值，需先拼接再包裹。
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<code>~"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()都没了
IE Hack 前缀（+、_、*）的写法差异
属性名前缀不能裸写，但处理方式不同：
立即学习“前端免费学习笔记（深入）”；
-
*是唯一例外：可直接写*display: inline;，Less 宽容它作为 IE7 属性前缀 -
+和_必须走变量注入：@hack: ~"+"; @{hack}display: inline;→ 编译为+display: inline; -
9等后缀必须用~"9"，且引号不可省：~"9"✅，~9❌（语法错误） - 多个 Hack 连用需整体包裹：
@hack: ~"9\0";（第二个\用于转义第一个）
最容易被忽略的陷阱：路径 vs 编译输出位置
~"" 只解决 Less 编译阶段的字符串解析问题，它不修正路径逻辑错误。很多 404 不是因为特殊字符，而是因为：
- 你写的
url(~"../images/logo.png")是按 Less 源文件位置写的，但最终 CSS 文件可能在/dist/css/下，相对路径已失效 - Webpack +
less-loader中，如果资源放在public/，路径应写成url(~"/icons.svg")，而非url(~"../public/icons.svg") - 检查方法：打开编译后的
.css文件，复制url()里的完整路径，粘到浏览器地址栏看能否直连资源
真正麻烦的从来不是怎么加 ~""，而是改完一处，忘了另一处——比如修好了 calc，却漏掉了同文件里的 9，结果整个 Less 文件卡死在构建环节。
