~"" 是 less 中强制字符串原样输出的语法边界，用于绕过编译期解析，避免 calc()、var()、含特殊字符的 url 等被错误处理或报错。
必须用 ~"" 包裹整段需原样输出的内容，否则 Less 会提前解析、报错或输出错误值。
为什么 ~"" 不是可选技巧，而是语法边界
Less 解析器在编译期就介入所有字符串、括号、连字符和特殊符号，它不区分“这是 CSS 还是 Less 代码”。一旦遇到 calc()、var(--x)、含 @ 的 URL、带空格的属性选择器，就会尝试按 Less 规则解析——结果不是报错就是静默篡改。只有 ~"" 能让这段内容彻底跳过解析阶段，原样透传到输出 CSS 中。
常见翻车现象：
-
width: calc(100% - @gap);→ 编译成width: calc(80%);（如果@gap: 20px） -
src: url("fonts/@{name}.woff2");→ 报错variable @name is undefined（因为引号内不支持插值） -
color: var(--primary);→ 输出color: var();或直接ParseError
~"" 内部不支持插值，变量必须在外展开
~"" 是纯字符串容器，里面写 @{var} 也不会替换。所有变量拼接必须在引号外完成，再整体包裹。
正确写法示例：
-
@gap: 24px;→height: ~"calc(100vh - @{gap})"; -
@theme: "dark";→@full-var: "--@{theme}-primary"; color: ~"var(@{full-var}, #333)"; -
@url-base: "assets/";→background: url(~"@{url-base}icon.png");
错误写法（全部失效）：
-
~"calc(100% - @{gap})"（@{gap}在引号内不展开） -
~"var(--@{theme}-primary)"（同上，输出字面量） -
~"url(@{path})"（url()不是 Less 函数，不会被识别）
哪些场景必须用 ~""，漏掉就编译失败
以下内容只要没加 ~""，Less 就无法安全处理：
-
calc()表达式：哪怕只是calc(100% - 1px)，也得~"calc(100% - 1px)" - CSS 原生变量引用：
~"var(--primary, #007bff)"，不能省略var()外壳 - 含
@、空格、反斜杠的 URL：url(~"icons/icon@2x.png")、url(~"fonts/Inter Italic.woff2") - 复杂选择器：
~"[data-title=\"Hello World\"]"、~":is(.a, .b):not(:hover)" - IE Hack 或非法标识符值：
background: red<code>~"9";、filter: ~"blur(2px) brightness(1.2)"
容易被忽略的关键点
~"" 只管“不解析”，不管“是否合法”。它不会校验你拼出来的 var(--missing) 是否真有定义，也不会检查 calc(100vw - 20) 缺少单位——这些错误只会在浏览器运行时暴露，Less 编译期完全沉默。真正要命的是：只要漏掉一个 ~""，后面所有单位、括号、空格规则都白搭，Less 已经在第一轮就把表达式嚼碎了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
