less中需用~""包裹字符串以避免解析错误，如~"calc(100% - 2px)"；单/双引号仍可能触发解析，而~""完全透传原生css值，但内部不支持变量插值或运算。
Less里用~""包裹字符串才能转义特殊字符
Less默认会对引号内的内容做变量插值或表达式求值，直接写url("foo/bar#hash")会被当成CSS输出，但#hash部分在CSS里是合法的，而像calc(100% - 2px)、rgba(0,0,0,0.5)这类带括号和运算符的值，如果不加处理，Less会尝试解析它们，报ParseError: expected ")"或variable @xxx is undefined。
正确做法是用~""（波浪号+双引号）显式声明：这是一个原生CSS字符串，别动它。
-
background-image: ~"url('/assets/img/arrow.svg#icon-arrow')"——#icon-arrow不会被当Less变量或选择器解析 -
width: ~"calc(100% - 2rem)"—— 避免Less把calc误认为函数调用 -
filter: ~"drop-shadow(0 2px 4px rgba(0,0,0,0.2))"—— 括号嵌套和逗号全保留原意
单引号、双引号、~""三者行为完全不同
Less中引号不是“单纯字符串”，而是有语义的：
- 双引号
"..."：支持变量插值，如@color: red; color: "@color"→color: "red"（带引号输出） - 单引号
'...'：不插值，但仍是Less字符串类型，遇到calc或url()仍可能触发解析错误 -
~"..."：唯一真正“透传”给CSS的语法，等价于告诉编译器：“这段字面量原样扔进CSS，一个字符都别改”
所以'calc(100% - 2px)'依然会报错，必须写成~"calc(100% - 2px)"。
转义后无法再参与Less运算，这是设计使然
~""包裹的内容完全脱离Less运行时，意味着你不能再对它做加减、拼接或条件判断。比如下面写法无效：
@gap: 2px;
width: ~"calc(100% - @{gap})"; // ❌ 编译失败：@{gap}在~""内不展开
如果需要动态拼接，得把可变部分拆出来：
- 用字符串拼接函数：
~"calc(100% - @{gap})"→ 改为~"calc(100% - " + @gap + ")" - 或提前组装好值：
@calc-val: "100% - @{gap}"; width: ~"calc(@{calc-val})"
注意：后者中@{calc-val}仍需在~""外展开，否则~"calc(@{calc-val})"里的@{calc-val}根本不会被识别。
Webpack或Vite里Less-loader版本影响~""兼容性
Less 3.x起正式支持~""，但旧版loader（如less-loader ~""被忽略或报错。
- 检查
less-loader版本：npm list less-loader，确保 ≥ 6.0 - 确认Less版本：
npm list less，推荐 ≥ 3.13.1 - 若用Vite，
vite-plugin-less默认集成较新Less，但自定义lessOptions时勿覆盖math选项（设为always可能干扰转义逻辑）
最稳妥的验证方式：写一行test: ~"x#{y}z"，看编译后是否输出test: x#{y}z —— 如果输出test: xyz或报错，说明转义没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
