Less中~""用于原样输出字符串，避免编译器解析括号、空格、运算符等；须包裹整个值，不支持内部插值，变量需先拼接再包裹，适用于filter、calc()、@keyframes等场景。
Less里用~""绕过编译器解析，不是为了“转义”，而是让字符串原样透出
Less的~""不是CSS里的\转义，它本质是“告诉Less：别碰这里面的东西，直接当纯文本吐给CSS”。比如滤镜值blur(2px) brightness(1.2)含括号和空格，Less默认会尝试解析函数、运算，结果报错或输出错乱。
常见错误现象：TypeError: Cannot read property 'value' of undefined（Less 3.x）或编译后滤镜变成blur(2px brightness(1.2))这种非法语法。
-
~"blur(2px) brightness(1.2)"→ 输出filter: blur(2px) brightness(1.2); -
"blur(2px) brightness(1.2)"（没加~）→ Less可能拆解blur()为函数调用，报错或丢掉空格 - 变量拼接时也得套
~：@filter-val: "contrast(0.9)"; filter: ~"@{filter-val} saturate(1.3)";
滤镜链里混用变量和静态值，~""必须包住整个字符串
Less不支持在~""内部插值（比如~"blur(@{r}px)"会原样输出，不替换@{r}）。想动态拼滤镜，得先拼好字符串再~包裹。
使用场景：响应式滤镜强度随@radius变量变化，或主题色驱动的drop-shadow()偏移量。
立即学习“前端免费学习笔记（深入）”；
- 错的写法：
filter: ~"blur(@{radius}px)";→ 输出字面量blur(@{radius}px) - 对的写法：
@blur-str: "blur(" + @radius + "px)"; filter: ~"@{blur-str} contrast(0.8)"; - 更稳的做法：用
replace()或e()辅助，但e()已废弃，优先用~"" + 变量拼接
~""在@keyframes和calc()里同样关键
动画关键帧里写transform: translateX(calc(100% - 20px))，Less会把calc()当函数处理，试图执行减法——结果100% - 20px被算成80%之类荒谬值。同理，@keyframes里带百分号、括号、逗号的值全得~保命。
性能影响几乎为零，只是字符串标记；兼容性上，所有Less 2.0+都支持，但老版本（如1.7）需用e()替代（不推荐）。
@move: "translateX(calc(100% - 20px))"; transform: ~"@{move}";@keyframes slide { ~"0%": { opacity: 0; }; ~"100%": { opacity: 1; }; }- 注意：
~"0%"必须带引号，否则Less解析成数字0，输出0: { ... }（非法CSS）
真正容易漏掉的点：嵌套规则里~""要防双重包裹
当.box:hover里写滤镜，又用了&嵌套，容易下意识写两层~，比如&:hover { filter: ~~"blur(1px)"; }——多一个~就失效，Less会当普通字符串处理，输出filter: ~"blur(1px)";到CSS里，浏览器直接忽略。
复杂点在于：这类错误不报错，只静默失效，调试时得查编译后CSS源码确认是否真透出了字符串。
- 检查编译输出，确认
filter属性值是blur(1px)，而不是~"blur(1px)"或blur(1px（缺右括号） - VS Code装Less编译插件时，关掉“实时预览”类功能，改用命令行
lessc style.less看真实输出 - 涉及
drop-shadow()含RGB颜色时，~"drop-shadow(0 2px 4px rgba(0,0,0,0.3))"整串必须一气呵成，断行或漏括号都会崩
