~"" 仅在 css 属性值中有效，用于未转义字符串插值；误用于选择器、属性名或 @keyframes 等位置会报错或静默失效，且不解析内部变量，安全用法限于闭合、无分号、无 less 符号的纯值场景。
为什么 ~"" 语法在 Less 中会失效或报错
Less 的 ~"" 是唯一支持未转义字符串插值的语法，但它只在**属性值位置**生效，且对引号、括号、分号等有严格限制。常见错误是把它用在属性名、选择器或 @keyframes 名称里——这些地方 Less 会直接报 ParseError: Unrecognised input 或静默忽略。
典型翻车场景：
- 写成
~"filter: blur(2px)"放在规则块外（如变量定义中）→ 解析失败 - 试图用
~".foo::before"当选择器 → Less 不支持未转义选择器 - 在
@supports条件里嵌套~""→ 大部分版本不识别，降级为普通字符串
~"" 的正确使用位置和边界条件
它只安全出现在声明值（property: value 中的 value 部分），且必须满足：内容不含未闭合括号、不以分号结尾、不混用 Less 变量插值符号 @ 或 &。
可安全使用的例子：
@blur: ~"blur(2px)";
.box {
filter: @blur;
transform: ~"translateZ(0) scale(1.02)";
}
不可靠的写法（即使看起来能编译）：
-
~"blur(@radius)"→@radius不会被解析，原样输出，不是动态计算 -
~"calc(100% - @gap)"→@gap不展开，浏览器收到的是字面量calc(100% - @gap) -
transition: ~"all 0.3s ease-in-out"→ 看似正常，但若后续要覆盖该属性，容易因空格/大小写导致 CSS 层叠异常
替代方案：什么时候该放弃 ~"" 改用 replace() 或 JavaScript 函数
当需要动态拼接、条件注入或兼容旧版 Less（~"" 能力太弱。比如生成带厂商前缀的 @keyframes 名称，或根据参数切换 will-change 值。
Less 3.5+ 支持内联 JS，更可控：
.animate(@name) {
@keyframes-name: replace("@{name}", "^", "-webkit-");
@-webkit-keyframes @{keyframes-name} { from { opacity: 0; } to { opacity: 1; } }
@keyframes @{name} { from { opacity: 0; } to { opacity: 1; } }
}
注意点：
-
replace()返回的是普通字符串，仍需配合~""才能绕过转义 —— 但此时它已处理好变量，更安全 - JS 函数（如
color(...)）返回值默认被转义，必须显式用~""包裹才有效 - Webpack + less-loader 默认禁用 JS 函数，需配置
math: 0和javascriptEnabled: true
真正危险的“未转义”需求：CSS 自定义属性与运行时值
很多人想用 ~"" 输出 --my-var: value 并指望 JS 后续读取，这行不通。Less 编译期就固定了值，且自定义属性名本身不能含空格或特殊字符，~"--foo: @{val}" 会破坏 CSS 语法结构。
正确做法是分离关注点：
- 静态值 → 直接写
--foo: 12px，无需~"" - 动态值 → 用 JS 注入，或通过
data-属性 + CSSattr()（注意兼容性） - 需要 Less 计算后再透出 → 先用变量存，再用
:root { --foo: @{var}; }，让 Less 正常解析单位和表达式
最易被忽略的一点：浏览器对未转义内容的容错远低于 Less 编译器。一个看似成功的 ~"" 输出，可能在 Safari 旧版里触发解析中断，且无任何 warning。宁可多写一行 CSS，也不要赌 ~"" 的边界行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
