~"" 是 Less 中强制原样输出字符串的唯一可靠语法，必须用于包裹 calc() 表达式、含特殊字符的 URL、复杂选择器、IE Hack 等，且其内部不支持任何 Less 运算或插值。
Less 会提前计算 calc() 表达式、误解析含特殊字符的 URL 或选择器，导致编译失败或输出错误 CSS。唯一可靠解法是用 ~"" 包裹整个需原样输出的字符串——不是可选技巧，是必须遵守的语法边界。
calc() 表达式必须用 ~"" 包裹
Less 把 calc(100% - 20px) 当作数学表达式求值，结果可能是 calc(80%) 或直接报错。它不区分这是 CSS 函数还是 Less 运算。
-
width: ~"calc(100% - 20px)";✅ 输出原样 CSS -
width: calc(100% - 20px);❌ 编译期被算成calc(80%) - 变量插值只能用
${@var}，不能用@{var}：~"calc(100% - ${@gap})"✅；~"calc(100% - @{gap})"❌（@{gap}在~""内不展开） - 嵌套
calc()同样适用：~"calc(calc(100% - 20px) / 2)"
URL 路径含 @、空格、反斜杠时必须转义
Less 解析器看到 @ 会立刻尝试匹配变量，空格和反斜杠则触发语法校验失败。哪怕路径本身合法，也会卡在编译阶段。
-
url(~"assets/icon@2x.png");✅@不被当变量 -
url("assets/icon@2x.png");❌ 编译失败，提示variable @2x is undefined -
src: url(~"fonts/Inter-Italic.woff2");✅ 安全 -
src: url(~"fonts/@{name}.woff2");❌@{name}在~""内不生效，输出字面量 - 正确写法：
@path: "fonts/Inter-Italic.woff2"; src: url(~"@{path}");
复杂选择器和属性值含引号、等号、方括号时必须用 ~""
Less 默认把 [data-title="Hello World"] 中的双引号吃掉，输出成 [data-title=Hello World]，在值含空格或特殊字符时会失效。
-
~"[data-title=\"Hello World\"]";✅ 原样输出带引号的属性选择器 -
[data-title="Hello World"];❌ 引号丢失，且空格导致解析异常 -
~":is(.a, .b):not(:hover)";✅ 支持伪类组合 -
~".@{cls}-active";❌ 无效；必须先拼接：@cls-name: "btn"; @{selector}: ~".@{cls-name}-active"; -
border-radius: 0px 25px 25px 0 ~"/" 0 25px 25px 0px;✅/作为独立 token 插入
IE Hack 和滤镜值这类含非法标识符的值必须整体包裹
像 background: red<code>~"9"; 或 filter: blur(2px) brightness(1.2); 这类值，括号、空格、数字后缀都不是标准 CSS 标识符，Less 解析器会直接拒绝。
background: red<code>~"9";✅ 输出background: red9;-
background: red9;❌ 报错：invalid escape sequence -
filter: ~"blur(2px) brightness(1.2)";✅ 避免函数解析和运算 -
+display: inline;❌ 仅*前缀被宽容；+和_必须变量注入：@hack: ~"+"; @{hack}display: inline; -
~""是冻结区：里面不支持任何 Less 运算、插值或函数调用，所有处理必须在外层完成
最容易被忽略的是：所有中间计算（如单位剥离、字符串替换、变量拼接）都得在 ~"" 外做完。一旦漏掉这一步，比如把 replace() 或 unit() 写进 ~"" 里，就等于放弃 Less 的计算能力，只剩字面量输出。这不是限制，而是编译模型决定的边界——~"" 的作用不是“转义字符”，是“切换到纯文本输出模式”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
