scss中&在深层嵌套中会导致选择器权重失控，因其展开为完整父路径而非语义前缀；安全用法限于单一类名父选择器下的bem拼接、兄弟复用及伪类绑定，禁用含空格/id/属性的选择器场景。
SCSS嵌套超过三层，& 符号就不再是省事工具，而是权重炸弹——它会把整条父选择器路径原样拼进去，直接生成 .page .layout .main .content p 这种 0-4-0 权重的选择器，后续想用单个类名覆盖几乎不可能。
为什么&在深层嵌套里会让权重失控
& 不是“当前模块的语义前缀”，而是“上一层选择器的完整字符串输出”。嵌套越深，它携带的上下文越多，拼出来的选择器就越长、越重。
- 错误写法：
.card { .header { .title { &.active { } } } }→ 编译为.card .header .title.active（权重 0-3-0），但你真正想表达的只是.card__title.active - 更危险的是带空格的父选择器：
.modal .content { &__body { } }→ 编译出.modal .content__body，这不是合法 BEM，浏览器也会标黄警告“复杂后代选择器” -
&遇到>、+、~会原样保留：.item + .item { &:hover { } }→.item + .item:hover，逻辑可能完全错位
哪些&用法是安全的
只有在扁平、语义明确、且父选择器本身是单一类名时，& 才可控。核心是：确保 & 展开后不引入额外层级。
- 正确 BEM 拼接：
.btn { &__icon { &--small { } } }→.btn__icon--small（权重恒为 0-1-0） - 兄弟关系复用：
.card { & + & { margin-top: -1px; } }→.card + .card，不增加父级 - 伪类绑定：
.btn { &:hover &__text { } }→.btn:hover .btn__text，语义对、权重不跳变 - 禁用场景：父选择器含空格、含 ID、含属性选择器（如
[data-role]）时，一律不依赖&拼接
替代&深层拼接的实操方案
当嵌套已到三层，还硬靠 & 往下钻，不如换方式切断链路。重点不是“怎么写得更巧”，而是“要不要写这层”。
- 用变量暂存语义块：
$block: ".card"; #{$block}__title { }，避免&在多层缩进中指向失准 - 状态类提级：
.card { @at-root .card--featured &__body { } }→.card--featured .card__body，跳出嵌套但保留语义关联 - 交集选择器必须脱离嵌套：
.form { @at-root button.primary { } }，而不是&.primary（那会产出.form.form.primary） - 响应式逻辑封装进
@mixin：@mixin responsive-title { font-size: 1rem; @media (min-width: 768px) { font-size: 1.25rem; } }，不靠嵌套撑结构
真正难的不是让 & 多嵌两层，而是删掉那一层后，HTML 是否仍能准确匹配——如果删了嵌套，.card__title 就找不到对应 class，说明 HTML 本就没按 BEM 写，这时候修模板比调 SCSS 更治本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
