~"" 是 less 中唯一能原样输出字符串到 css 的语法，用于绕过编译器解析，必须在 calc()、url()、font-family、filter 等含括号、空格、逗号或特殊字符的场景中使用。
Less 里用 ~"" 包裹字符串，是唯一能绕过编译器解析、原样输出到 CSS 的方式；不是“转义字符”，而是“跳过编译”指令。
什么时候必须用 ~""？
Less 默认把括号、斜杠、空格、逗号等当语法成分处理，遇到 calc、url、filter、font-family 或带参数的函数时，不加 ~"" 就会报错或算出荒谬值（比如 calc(100% - 20px) 被当成减法，输出 calc(80%)）。
-
calc()、minmax()、clamp()这类 CSS 函数——括号内容会被 Less 当表达式求值 -
url()含查询参数或括号，如url("icon.svg?x=(1+2)")，(1+2)会被计算 -
font-family含空格和逗号，如"Helvetica Neue", Arial, sans-serif，直接写会被拆成多个参数 - 滤镜链如
blur(2px) brightness(1.2)，空格和括号触发解析失败 - 选择器含非法字符（如
.foo.bar），反斜杠\.常失效，~".foo.bar"更稳
~"" 里能用变量插值吗？
可以，用 @{xxx}，但插进去的内容**不会被二次转义**，所以变量本身必须是干净字符串。
- ✅ 正确：
@gap: 20px; width: ~"calc(100% - @{gap})"; - ✅ 正确：
@url: "a.png?x=1"; background: ~"url('@{url}')"; - ❌ 错误：
@gap: "20px)"; width: ~"calc(100% - @{gap}";—— 插入后破坏括号配对 - ❌ 错误：
~"@{var}"——~""只接受字面量字符串，不能包裹变量引用
为什么不能在 ~"" 里调函数？
~"" 是纯文本透出层，所有计算必须在外完成。写 ~"calc(100% - @{replace: @height, 'rem', ''}rem)"，@{replace: ...} 不会被执行，只当普通文本输出。
- ✅ 正确顺序：
@clean-height: replace(@height, "rem", ""); width: ~"calc(100% - @{clean-height}rem)"; - ✅ 替代方案：用
unit()或percentage()提前处理单位，再塞进~"" - ⚠️ 注意：
escape()是 URL 编码函数（空格→%20），跟~""完全无关，别混用
常见错误和兼容性陷阱
双引号单引号效果一样，但必须配对；末尾漏引号、引号类型不匹配、插值后破坏结构，都会导致编译失败。
- ❌
~"url(icon.svg#layer=1&mode=fill)"——&和=在某些 Less 版本里可能触发解析，改用~'url("icon.svg#layer=1&mode=fill")' - ❌
border-radius: 0 25px 25px 0~"/"0 25px 25px 0;—— 斜杠单独转义可行，但可读性差，不如整段~"0 25px 25px 0/0 25px 25px 0" - ⚠️ Less 3.x 和 4.x 对
~""行为一致，但老版本（如 2.x）可能不支持插值，务必确认环境
真正难的不是记住 ~""，而是判断哪一步该算、哪一步该透出——所有运算、替换、拼接必须在 ~"" 外做完，它只负责最后一道“封口”。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
