~是less中用于原样输出的转义标记，必须用于calc()、含@或空格的url、ie hack后缀、复杂选择器等场景；~""内不可用变量，需外部拼接完成；ie前缀中仅*可裸写，+和_须变量注入，9等后缀必须带引号。
~不是运算符，是转义标记；它不参与计算，只告诉Less编译器“别解析，原样输出”。写成~"..."不是在做字符串拼接或数学运算，而是在绕过Less的语法解析阶段——漏掉波浪号、多加空格、或试图在里面插变量，都会直接导致编译失败或输出错误内容。
哪些地方必须用~""才能通过编译
Less 解析器一见到某些符号（比如@、9、calc(开头、含空格的URL）就会立刻尝试运算或匹配变量，根本不会等你写完整条语句。以下场景不加~""必报错：
-
calc()表达式：width: calc(~"100% - 50px");✅；width: calc(100% - 50px);❌（会被提前算成calc(50%)） - URL 路径含
@或空格：background: url(~"assets/icon@2x.png");✅；url("assets/icon@2x.png");❌（@被当变量名） - IE Hack 后缀：
background: red<code>~"9";✅；background: red9;❌（9是非法转义序列） - 复杂属性选择器含引号或
]：~"[data-title="Hello World"]"✅；[data-title="Hello World"]❌（引号+空格触发解析异常）
~""里不能写变量，拼接必须提前完成
~""内部是“冻结区”：它不识别@{var}，也不执行任何运算。想动态生成带特殊字符的值，得先在外面拼好字符串，再整体包裹。
- 正确：
@path: "fonts/Inter-Italic.woff2"; src: url(~"@{path}"); - 错误：
src: url(~"fonts/@{name}.woff2");→ 输出字面量url("fonts/@{name}.woff2")，变量没展开 - 错误：
~"url(@{path})"→ 整个字符串被原样输出，连url()都没了
IE Hack 前缀（+、_、*）的写法差异
属性名前缀不能裸写，但处理方式不同：
-
*是唯一例外：可直接写*display: inline;，Less 宽容它作为 IE7 属性前缀 -
+和_必须走变量注入：@hack: ~"+"; @{hack}display: inline;→ 编译为+display: inline; -
9等后缀必须用~"9"，且引号不可省：~"9"✅，~9❌（语法错误） - 多个 Hack 连用需整体包裹：
@hack: ~"9\0";（第二个用于转义第一个）
真正麻烦的从来不是怎么加~""，而是改完一处，忘了另一处——比如修好了calc，却漏掉了同文件里的9，结果整个编译失败，错误提示还不告诉你在哪一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
