Less 中深层继承只是嵌套语法的视觉错觉，实际编译为后代选择器致权重指数上升；应避免超3层嵌套，慎用 & 和 @at-root，优先采用 BEM 命名或修饰符类解耦。
深层继承在 Less 中不会真正发生——它只是嵌套语法的视觉错觉，实际编译后全是后代选择器，权重会指数级上升。想避免特异性灾难，核心不是“怎么继承更深”，而是“别让嵌套生成多余层级”。
Less 的 & 符号不是作用域，是选择器拼接
很多人以为 & 能像 JS 作用域一样隔离样式影响范围，其实它只是把父选择器原样复制一遍再拼上去。比如：
.card {
&__header {
color: #333;
}
& .btn {
margin-top: 8px;
}
}
第二条规则编译出的是 .card .btn，不是 .card-btn，多了一层无意义的后代关系，特异性直接 +1（从 0,0,1,0 升到 0,0,2,0）。
- ✅ 安全用法：
&:hover、&__content—— 生成伪类或 BEM 元素，不增层级 - ❌ 危险用法：
& .icon、& > li—— 强制加空格或操作符，等于手动抬高权重 - ⚠️ 隐蔽陷阱：
.list { & li { ... } }编译后仍是.list li，&根本没起作用，纯属冗余
嵌套超过 3 层就该警觉
Less 编译器不检查嵌套深度，但浏览器渲染引擎对高特异性选择器敏感。4 层嵌套如 .page .main .section .title 权重已达 0,0,4,0，后续覆盖只能靠更长选择器或 !important，形成恶性循环。
- 真实项目中，超过 3 层的嵌套几乎都源于“想复用父组件样式逻辑”，但更好的解法是提取成
.title--section这类修饰符类名 - VS Code 的 CSS Peek 功能在深层嵌套里常跳转错位，你点
&__footer可能停在父块开头，调试成本陡增 - 构建时 Dart Sass 或 lessc 不报错，但生成的 CSS 文件体积和选择器平均长度会明显上升
@at-root 不是嵌套急救包
有人遇到权重爆炸就下意识加 @at-root，比如：
.modal {
@at-root .close {
opacity: 0.5;
}
}
这确实把 .close 提到顶层，但代价是失去上下文关联——它不再只作用于 .modal 内的关闭按钮，变成全局生效。这不是解耦，是放养。
-
@at-root正确用途只有两个：一是剥离媒体查询包裹（@at-root (with: media)），二是导出工具类（如@at-root .sr-only） - 想局部解耦，应该用
.modal-close这种独立类名，或通过 BEM 的.modal__close明确归属 - 所有靠
@at-root“补救”的深层嵌套，根源都在最初没定义好组件边界
真正难的不是写对语法，而是每次敲下 & 前，心里得清楚它最终会拼出什么选择器——因为编译器不会替你做设计决策，它只忠实地执行拼接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
