less 中用 ~"" 包裹字符串可阻止编译器解析，适用于 calc()、url()、font-family 等含特殊符号或 css 函数的场景；插值 @{xxx} 可在其中使用，但函数调用需在 ~"" 外完成，escape() 不适用此目的。
Less 里怎么写 CSS 字符串但不让编译器解析？
用 ~"" 包裹字符串，这是 Less 唯一可靠的转义方式。比如你想输出 calc(100% - 20px) 而不是让 Less 尝试做减法运算，就得写成 ~"calc(100% - 20px)"。
Less 默认会把括号里的内容当表达式处理，calc() 这种 CSS 函数首当其冲被误解析。不加 ~，编译直接报错或结果错乱——常见错误现象是生成了 calc(80%) 这种荒谬值。
-
~""只作用于字符串字面量，不能包裹变量，比如~"@{var}"会报错 - 双引号、单引号效果一样，但必须配对，
~'calc(100% - @gap)'合法，~"calc(100% - @gap)缺少结尾引号就失败 - 里面可以插值（
@{xxx}），但插进去的内容**不会被二次转义**，所以确保变量本身不含需转义的字符
什么时候必须用 ~""？
三类场景绕不开：CSS 自定义函数（calc、minmax）、带浏览器前缀的值（-webkit-linear-gradient）、含特殊符号的 URL 或字体名。
例如 url() 里有查询参数或括号，url("a.png?x=(1+2)") 不加转义，Less 会试图计算 (1+2)；又比如定义字体族名 "Helvetica Neue", Arial, sans-serif，中间有空格和逗号，直接写会被 Less 当作多个参数拆开。
-
background: ~"url('icon.svg#layer=1&mode=fill')"—— 查询参数里的&和=不触发解析 -
font-family: ~"'Inter', -apple-system, BlinkMacSystemFont"—— 整个字符串原样输出，避免逗号分词 - 不要对纯颜色值、数字、已知安全的关键字（如
red、bold）用~""，多余且影响可读性
~"" 和 replace() 混用容易踩什么坑？
想动态拼接 CSS 函数？别在 ~"" 里直接调 replace()。Less 不允许在转义字符串内部执行函数调用，~"calc(100% - @{replace: @gap, 'px', ''} + 'px')" 这种写法无效，编译器直接忽略函数部分，只当普通文本。
正确做法是先算好值，再塞进 ~""。比如用 unit() 或 percentage() 处理单位，或者用 replace() 提前生成干净字符串，最后一步才转义输出。
- 错误示例：
width: ~"calc(100% - @{replace: @height, 'rem', ''}rem)"→@{replace:...}不被求值 - 正确顺序：
@clean-height: replace(@height, 'rem', '');，再width: ~"calc(100% - @{clean-height}rem)" -
~""是“输出层”操作，所有计算、拼接、替换必须在它外面完成
为什么不用 escape() 函数？
Less 确实有 escape()，但它干的是 URL 编码（比如空格变 %20），和 CSS 值转义完全不是一回事。想输出 url("a b.png")，用 escape("a b.png") 得到的是 url("a%20b.png")，这不是你想要的“绕过 Less 解析”，而是真改了文件名。
几乎所有搜到的“Less escape 函数教程”都在误导人。官方文档里 escape() 的定位就是 URI 编码工具，和 ~"" 的语义、时机、用途全都不重叠。
-
escape()输入字符串，输出编码后字符串，仍参与 Less 表达式计算 -
~""是语法级指令，告诉编译器：“这里面的东西，一个字都别动，原样吐给 CSS” - 二者混用（比如
~"url(#{escape(@path)})"）既冗余又危险，#{}是旧版插值语法，已废弃且行为不稳定
Less 的转义本质是“关掉编译器的解析开关”，不是“给字符串加一层包装”。真正难的不是记住 ~""，而是判断哪段内容正处于被误解析的风险中——多看编译后的 CSS 输出，比死记规则管用。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
