~""用于绕过less编译直接输出原始css，不带~的""参与变量插值和转义；如content: ~"attr(data-label)";生成函数调用，而""会输出字符串字面量。
Less里~""和""到底怎么用？
Less中字符串处理的核心分歧就在这儿：带~前缀的字符串会被直接输出为纯CSS（不转义、不拼接），不带~的则参与变量插值和编译时计算。这不是语法糖，而是编译阶段的执行路径差异。
常见错误是把content: "~"attr(data-title)";写成content: ""attr(data-title)";——后者会被Less当成空字符串拼接，结果生成content: "";，完全丢掉属性值。
-
~"hello"→ 输出hello（无引号，原样透出） -
"hello"→ 输出"hello"（带双引号，标准CSS字符串） -
~"'hello'"→ 输出'hello'（单引号包裹，仍为原样） -
"'hello'"→ 输出"'hello'"（双引号套单引号，CSS里合法但冗余）
什么时候必须用~""？
只有需要绕过Less编译器、直接向CSS输出原始文本时才用~""。典型场景是CSS函数调用、伪元素content动态值、或需要保留括号/斜杠等特殊字符的场合。
比如想生成content: attr(data-label);，写content: ~"attr(data-label)";；如果写content: "attr(data-label)";，结果会是content: "attr(data-label)";（字符串字面量，不是函数调用）。
- 伪元素
content中调用attr()、counter()必须用~"" - 生成
url()时，若路径含变量且需保持url(...)结构，用~"url(@{path})" - 写
@supports条件里的函数表达式，如~"(display: grid)" - 避免
~""用于纯文本内容——比如~"Click me"会导致CSS里没引号，可能被解析为关键字报错
content里拼接变量和引号的坑
Less对content属性特别敏感：它要求值要么是字符串字面量（带引号），要么是函数调用（无引号）。混用就会出问题。
例如变量@label: "Save";，想生成content: "Save";，正确写法是content: "@{label}";；如果误写成content: ~"@{label}";，结果变成content: Save;（无引号，浏览器当作未定义标识符）。
- 纯文本变量插值用
"@{var}"，不是~"@{var}" - 要拼接引号本身，比如生成
content: '"quoted"';，写content: ~"\"@{label}\"";（注意转义） - 嵌套引号容易漏转义：
~"'"@{text}"'"不如拆成~"'"+@{text}+"'"更直观 - 不要在
~""里写@{var}再加额外引号——Less不会二次解析，@{var}外的引号会被当普通字符输出
现代项目里要不要继续用~""？
PostCSS + CSS-in-JS流行后，~""使用频率大幅下降，但它在遗留Less项目、主题变量系统、或需要深度控制输出格式时仍有不可替代性。关键是别把它当“字符串模板”用——它只是逃生舱口，不是常规通道。
最容易被忽略的是：一旦用了~""，里面所有内容都脱离Less作用域。变量、函数、甚至注释/* */都会原样透出，不会被编译器检查。写错一个括号，CSS就直接失效，而且Less编译器还不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
