Less中反斜杠转义失效的根本原因是解析阶段优先按CSS语法校验选择器合法性，非法结构（如.foo.bar）直接报错；必须确保转义后构成语法合法的单个标识符，或用~""字符串插值原样输出。
Less中反斜杠转义失效的常见原因
Less里用\对选择器中的特殊符号（比如.、#、:、[）做转义，看似简单，实际常因编译器解析顺序出错而“没反应”。根本原因是：Less在解析阶段会先尝试按CSS语法理解整个选择器，若结构不合法（如.foo.bar被当成两个类名拼接），就直接报错或忽略转义，根本不会走到后续编译逻辑。
真正起作用的前提是：转义后的字符串必须构成一个**语法上可被Less识别为单个标识符**的选择器片段。否则\只是白写。
- 错误写法：
.class.name→ Less认为这是非法类名，报ParseError: Expected selector - 正确写法：
.classe name（十六进制转义.为e），或更稳妥地用~".class.name" - 注意：十六进制转义末尾要加空格，否则
ename会被误读为字符ṉ
用~""字符串插值绕过解析限制
当选择器含动态内容、CSS自定义属性引用，或包含/、@、$等Less保留符号时，~""是最可靠的方式。它告诉Less：“这段内容别解析，原样输出到CSS”。
适用于这些场景：
立即学习“前端免费学习笔记（深入）”；
- 匹配伪类带参数的复杂写法：
~":is(.a, .b):not(:hover)" - 嵌入CSS变量名（含连字符）：
~"[data-theme='dark']" - 对接第三方库生成的类名（如
css-modules产出的_1x2y3z-header）：~"._1x2y3z-header"
⚠️ 注意：~""内不能直接写Less变量（如~".@{cls}-active"无效），需先拼接再插值：@cls-name: "btn"; @{selector}: ~".@{cls-name}-active";
处理属性选择器里的引号和等号
Less对[]内的值默认当作表达式处理，导致[data-id="abc"]里的双引号被吃掉，输出成[data-id=abc]——这在严格模式下可能失效（尤其值含空格或特殊字符）。
解决方案分两级：
- 值不含空格/特殊字符：直接写
[data-id=abc]，Less会原样输出 - 值含引号、空格或
]：必须用~""包裹整个属性选择器：~"[data-title="Hello World"]" - 动态值推荐拼接：
@val: "test[1]"; ~"[data-key="@{val}"]"，避免手动转义[和]
Escaping在嵌套规则里的陷阱
Less嵌套时，父选择器会自动拼接到子选择器前。如果父选择器本身用了~""或转义，拼接后极易产生非法CSS。例如：
.parent {
~".child" {
color: red;
}
}
编译结果是.parent .child（正常），但若写成：
~".parent" {
.child {
color: red;
}
}
结果却是.parent.child（无空格！），因为~".parent"被当作文本，嵌套逻辑失效。
关键原则：只对「最终需要原样输出」的选择器片段用~""，且尽量避免在嵌套顶层使用；如必须，改用普通类名+注释说明用途，比强行转义更可持续。
复杂选择器的真实难点不在转义语法，而在判断「哪一层该由Less解析，哪一层该交给CSS引擎」——漏掉这个区分，所有\和~""都只是临时止痛药。
