Sass嵌套本身不提升权重，但易生成高权重选择器；应检查编译后CSS的空格数、类名重复次数和ID，而非依赖缩进判断。
直接说结论：Sass嵌套本身不提升权重，但会无意中生成高权重选择器；真正要盯住的，是编译后 CSS 里那个空格数、类名重复次数和有没有 ID。
检查编译后 CSS 的选择器权重，别靠缩进猜
你写的 .card { .header { .title { } } } 编译出来就是 .card .header .title（权重 0-3-0），不是 .card__header__title（权重 0-1-0）。这种差异在 DevTools 里一眼就能看出，但很多人只看 Sass 源码缩进，误以为“写得紧凑=权重低”。
- 用 VS Code 按住
Ctrl点击编译后的.css文件，直接跳转查看真实输出 - 搜索
.card，看它后面跟了几个空格分隔的类名——超过 3 个（如.card .sidebar .nav .item）就是危险信号 - 权重每多一个 class 就 +10，
#header .nav a是 111，后面加 10 个 class 都压不住
& 前有没有空格，决定你是拼接还是嵌套
& 不是“视觉父级”，而是上一层选择器的完整字符串。有无空格，输出完全不同：
- 有空格：
.card { .header { &__title { } } }→ 编译出.header__title（&指向.header，丢失.card上下文） - 没空格：
.card { &__header { &__title { } } }→ 编译出.card__header__title（纯拼接，权重仅 0-1-0） - 想保留外层又不想写太多
&？用变量：$block: ".card"; #{$block}__title { color: red; }
用 @at-root (with: media) 和 > 主动降权
嵌套里写 @media 或伪类，很容易把选择器包进更长链里，悄悄抬高权重：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.btn:hover { @media (max-width: 768px) { color: red; } }→ 编译为@media { .btn:hover { color: red; } }（权重不变，但被包裹后覆盖难度上升） - 正确写法：
.btn:hover { @at-root (with: media) { @media (max-width: 768px) { color: red; } } }→ 输出平级@media块，不增加选择器层级 - 用
>替代空格：.card { > .header { > h1 { } } }→ 编译为.card > .header > h1（权重仍是 0-3-0，但匹配更快、DOM 变动时更稳定）
什么时候该停手，改用 %placeholder 或独立类名
当嵌套开始描述“DOM 位置”而非“组件职责”时，就该重构了：
- 比如
article .card div p em这种路径式写法，本质是语义错位，应改为.card__quote-emphasis -
%placeholder不输出 CSS，只在@extend时合并声明，避免重复类名堆叠（.list .item .badge { @extend %flex-center; }权重 0-3-0，而%flex-center { @extend .card__body; }权重 0-1-0） -
%不能写在@media块内，也不能带伪类（%btn:hover报错）
最常被忽略的一点：权重不是越高压越好，而是越可控越稳。你改一个 .card__title 颜色，不该需要查三层父级、加 !important、再清缓存才能生效。
