必须用 ~"" 的场景包括：calc() 中含运算符、url 含 @、ie hack、含空格/引号的选择器、var(--x)、@import 外部 url；~"" 内禁止插值与运算，仅作字符串冻结。
Less 里遇到 calc()、var(--x)、含 @ 的 URL、IE Hack 或带空格/引号的选择器，不加 ~"" 就会编译失败——这不是“要不要转义”，而是语法硬性要求。
哪些地方必须用 ~"" 才能通过编译
Less 解析器看到某些符号（比如 --、@、calc 中的运算符）会立刻尝试解析为变量、运算或路径，根本不会等你写完整条语句。漏掉 ~"" 就会中断编译：
-
calc(~"100% - 50px")✅；calc(100% - 50px)❌（被算成calc(50%)） -
url(~"assets/icon@2x.png")✅；url("assets/icon@2x.png")❌（@被当变量前缀） -
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()都没了
处理 var(--x) 的典型陷阱
Less 看到 -- 会直接报错或静默忽略，color: var(--primary); 很可能编译成 color: var();。必须写成：
color: ~"var(--primary)";- 要动态拼变量名：
@theme: "dark"; @prop: ~"var(--@{theme}-primary)";（先拼再包） - 注意：
--dark-primary即使拼对了，如果 CSS 里没定义这个自定义属性，浏览器也不会报错——~""不解决运行时缺失问题
@import 外部 URL 必须加 ~，且不能有空格或变量
Less 默认把 @import 当本地路径处理，遇到 https:// 就去文件系统找，报 File not found: https://...。用 ~ 是唯一透传方式：
- 正确：
@import url(~"https://fonts.googleapis.com/css2?family=Inter"); - 错误：
@import "https://...";（当本地路径） - 错误：
@import ~ "https://...";（~和引号间不能有空格） - 错误：
@url: "https://..."; @import ~@url;（~不支持变量插值）
真正容易被忽略的是：路径逻辑错误和转义错误常被混为一谈。~"" 只管编译阶段的字符串解析，它不修正相对路径失效、资源未部署、public 目录位置错等问题。验证方法很简单——打开编译后的 .css 文件，复制 url(...) 里的路径，直接粘贴进浏览器地址栏看能不能访问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
