SCSS嵌套会因&拼接父选择器导致CSS权重失控，如.form .field__input权重升至0-0-2-0；应使用@at-root跳出嵌套、:where()归零局部权重，并避免在深层嵌套中使用@extend。
编译出的CSS选择器权重过高，根本不是SCSS写错了，而是嵌套结构被字面展开后，生成了过长、过深的后代选择器——比如 .page .main .content .title 权重是 0-0-4-0，而浏览器匹配它需要逐级回溯父元素，覆盖时还得写得更长或加 !important，这不是可控提权，是失控。
SCSS嵌套如何意外拉高权重
SCSS里的 & 不是“当前缩进的父级”，而是“上一层完整选择器字符串”。一旦父级含空格或关系符，& 就会把它们一并带上，导致权重飙升。
-
.form .field { &__input { } }→ 编译为.form .field__input（权重 0-0-2-0），比预期多一个类名 -
.card > .header { &__title { } }→ 编译为.card > .header__title（权重 0-0-1-1），但若本意是.card__header-title，就错失扁平化机会 -
.nav { li { a { &:hover { } } } }→ 编译为.nav li a:hover（权重 0-0-3-1），远高于a:hover（0-0-1-1）
用 @at-root 和 :where() 主动降权
@at-root 能跳出嵌套上下文，避免无谓的父级拼接；:where() 则让括号内选择器归零权重，但必须配合外层有实际权重的选择器才生效。
-
.modal { @at-root .modal__close { position: absolute; } }→ 输出.modal__close（0-0-1-0），不带任何父级前缀 -
.app-root :where(.ant-btn, .ant-input)→ 外层.app-root提供权重（0-0-1-0），括号内部分不增权，便于业务样式覆盖 - 别写
:where(.ant-btn-primary)单独使用——权重为 0-0-0，连默认样式都盖不住
为什么 @extend 在嵌套里更危险
@extend 不是复制样式声明，而是把被继承选择器原样拼接到当前嵌套路径末尾。嵌套越深，拼出的选择器就越长、权重越不可控。
立即学习“前端免费学习笔记（深入）”；
-
.card { .header { h1 { @extend %title; } } }→ 可能生成.card .header h1和.card .header .title两条规则，后者权重直接翻倍 - 同一
%placeholder被多个嵌套块调用，会重复输出多条高权重规则，体积和覆盖难度同步上升 - 真正安全的场景只有扁平结构：
.btn { &--primary { @extend %btn-base; } }→ 输出.btn--primary（0-0-1-0）
最常被忽略的一点：权重问题从来不是“怎么写得更高”，而是“怎么让样式职责更清晰”。.card__title 必须显式出现在 HTML 中，而不是靠 DOM 结构推导——这既是 BEM 的语义要求，也是切断浏览器匹配路径的性能底线。
