Less 中的 & 表示完整父路径拼接而非当前作用域，如 .card { .header { .title { &.active {} } } } 编译为 .card .header .title.active；空格是后代选择器分隔符，&.cls 与 & .cls 语义不同；嵌套超三层时 & 易失控，推荐 BEM 风格的 &__ 和 &-- 写法。
为什么&在嵌套块里会复制整段父路径
Less 的 & 不是“当前作用域”，而是当前嵌套层级中所有父选择器的**完整拼接字符串**。比如 .card { .header { .title { &.active { } } } }，编译后不是 .title.active，而是 .card .header .title.active——& 展开的是整个前置链，不是最近一层。
常见错误现象：.modal { .overlay { .close { &:hover { } } } } 本意是给 close 元素加 hover，结果生成 .modal .overlay .close:hover，权重飙升到 0-3-1，后续连 .close:hover 都覆盖不了。
- 真正想写
.close:hover？直接平级写：.close:hover { }，别嵌套 - 想生成
.modal__close这类 BEM 类？用&__close，且确保它在.modal直接子级里定义 - 想拼伪类但又怕拉高权重？必须把
&紧贴冒号：&:hover✅，& :hover❌（空格会让它变成后代选择器）
& 和空格混用导致选择器语义错乱
空格在 Less 嵌套中不是缩进格式，而是明确的**后代选择器分隔符**。漏掉或误加空格，& 就会绑定到完全不同的上下文。
错误示例：.btn { .icon { &.small { } } } → 编译为 .btn .icon.small，但你可能想要的是 .btn__icon.small 或 .btn .icon.small 语义不一致。
-
&.small（无空格）→ 绑定到最近父选择器，即.icon，但前提是.icon是独立 class；若它本身是嵌套出来的，&仍会带上全部前缀 -
& .small（有空格）→ 强制后代关系，生成.btn .icon .small，多出一层无意义匹配 - 子元素关系必须显式写
& > .item，不能靠缩进，默认缩进 = 后代
嵌套超过三层时&基本失去可控性
当嵌套达到 4 层（如 .layout { .main { .card { .body { &.highlight { } } } } }），& 展开的结果已经无法靠肉眼预测：它会拼出 .layout .main .card .body.highlight，权重 0-4-1，且和 HTML 结构强耦合。
此时 & 不再是简化工具，而是放大器——任何一处修改都可能触发整条路径重算，AST 节点数也随层数指数增长，容易在编译阶段就 OOM。
- 检查编译输出：如果看到
.page .section .item .content .title这类 5+ 级选择器，说明&已经失控 - VS Code 的 Less 插件会在第 4 层缩进标黄，这是最轻量的实时拦截信号
- 不要指望
@at-root救场：@at-root只能提级单条规则，不能重写嵌套逻辑；真要拆，得手动改结构
替代方案比硬调&更可靠
与其花时间调试 & 在深层嵌套里的行为，不如换种写法。BEM + 显式 &__/&-- 是目前最稳定的方式。
例如，把 .card { .header { .title { color: red; } } } 改成：
.card {
&__header {
&__title {
color: red;
}
}
}
编译后是 .card__header__title（或按配置合并为 .card__title），权重恒为 0-1-0，且与 DOM 深度解耦。
- 伪类组合复杂时（如
a:not(:hover):focus），直接写原生选择器，Less 嵌套表达力有限 - 媒体查询内必须用
&显式绑定：@media (max-width: 768px) { .nav { & a { } } }，否则a会变成全局选择器 - 混合
:extend()和&是双重危险：前者复制整块声明，后者又叠加路径，体积和权重同时爆炸
最常被忽略的一点：HTML 里没真实存在 .card__header__title 这个类，再规范的 Less 输出也白搭。嵌套生成的选择器，最终得靠真实 DOM 节点承接，否则全是不可见的冗余 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
