必须用~""包裹calc()等特殊值，否则less会错误计算或报错；~""内不支持@{var}插值，仅支持${@var}，且url、复杂选择器、ie hack等均需整体转义。
Less 里写 calc() 或带特殊字符的值，不加 ~"" 就会编译失败或输出错值——这不是“可选技巧”，是必须遵守的语法边界。
calc() 表达式必须用 ~"" 包裹
Less 编译器看到 calc(100% - 20px) 会当成数学表达式直接计算，结果可能是 calc(80%)，甚至报错 Operation on an invalid type。它根本不管这是 CSS 原生函数。
-
width: ~"calc(100% - 20px)";✅ 输出原样width: calc(100% - 20px); -
width: calc(100% - 20px);❌ 编译期被算成calc(80%)或直接中断 - 嵌套也一样：
~"calc(calc(100% - 20px) / 2)"✅ - 变量插值只能用
${@var}：~"calc(100% - ${@gap})"✅；~"calc(100% - @{gap})"❌（@{gap}在~""内不展开）
URL 路径含 @、空格或反斜杠时必须转义
Less 解析器一见到 @ 就找变量，空格和反斜杠则触发语法校验失败。哪怕路径本身合法，也会卡在编译阶段。
-
url(~"assets/icon@2x.png");✅@不被当变量 -
url("assets/icon@2x.png");❌ 报错variable @2x is undefined -
src: url(~"@{path}");✅ 先拼串再包裹；src: url(~"fonts/@{name}.woff2");❌ 变量不生效，输出字面量 -
@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";
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 -
*display: inline;✅*是唯一可裸写的 IE7 前缀 -
+display: inline;❌ 必须走变量：@hack: ~"+"; @{hack}display: inline; -
~"9"✅；~9❌（语法错误，引号不可省）
真正容易漏掉的不是 calc，而是同文件里混用的 9、@ 路径、或带空格的选择器——改完一处，忘了另一处，编译就挂，错误提示还不告诉你在哪一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
