~""是less中强制原样输出的“冻结区”，内部不支持@{var}插值、不解析表达式，变量需先拼接再整体包裹。
~""里变量插值不生效，输出字面量
Less 的 ~"" 是“冻结区”，内部不解析任何 Less 语法：既不展开 @{var}，也不计算表达式，更不识别运算符。你写 ~"url(@{path})"，结果就是原样输出 url(@{path})，浏览器当然找不到资源。
必须分两步：先拼字符串，再整体包裹。
- 正确：
@path: "icons/logo.svg"; background: url(~"@{path}"); - 错误：
background: url(~"icons/@{name}.svg");→ 输出url("icons/@{name}.svg") - 错误：
@full: ~"var(--@{theme}-color)";→@{theme}不展开，--@{theme}-color变成字面量
转义后 CSS 运行时失效，但编译无报错
~"" 只保证编译通过，不保证运行时有效。比如 color: ~"var(--primary)"; 能编译成功，但如果 CSS 中根本没定义 --primary，浏览器就按默认色渲染——这个错误 ~"" 完全不捕获，得靠人工核对或 DevTools 查看 computed 值。
动态拼接主题变量时尤其危险：
- 安全：
@theme: "dark"; @prop: ~"var(--@{theme}-primary)"; color: @{prop}; - 隐患：
@theme: "light";但:root里只定义了--dark-primary→ 页面颜色消失，控制台却无提示
路径被转义但实际 404，误以为是转义问题
url(~"../assets/icon.png") 编译能过，不代表路径对。Less 按源文件位置解析相对路径；而最终 CSS 若被移到 /dist/css/ 下，../assets/ 就指向错了。
Webpack/Vite 等构建工具中，资源常放在 public/ 目录，应直接用绝对路径：
- 正确：
src: url(~"/fonts/inter.woff2");（从 public 根开始） - 错误：
src: url(~"../public/fonts/inter.woff2");→ 构建后路径断裂 - 验证方法：打开编译后的
.css文件，复制url(...)内容到浏览器地址栏，看是否返回 404
IE Hack 后缀漏掉 ~ 或格式错，整个样式块中断
background: red9; 不是“加个 9”，而是非法转义序列，Less 会直接中断编译，且错误提示往往不指明行号。唯一合法写法是 ~"9"，且不能有空格或引号嵌套。
- 正确：
@ie9: ~"9"; .box { background: #f00@ie9; } - 错误：
background: #f00~"9";→~必须紧贴引号 - 错误：
@ie9: "9"; background: #f00@ie9;→"9"是字符串，不是 IE Hack - 多 Hack 连用（如
9）必须整体包裹：@ie9only: ~"9\0";（注意双反斜杠）
~"" 的“单向性”：它放行编译，但把所有运行时校验、路径有效性、CSS 变量定义、浏览器兼容性都甩给了你——这些地方出错，不会在终端报红，只会让样式静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
