嵌套本身不提高权重，但空格嵌套会生成高特异性选择器；每多一层空格，类级特异性+1，超3层易触发lighthouse告警，&前有空格即构造后代选择器而非拼接类名。
嵌套本身不提高权重，但会生成高权重选择器；真正的问题是你写的嵌套正在悄悄拼出 .page .section .content .item .title 这种 0-5-0 权重的选择器——不是 Sass 在抬权，是你在用空格“手动加权”。
嵌套超过3层就触发权重跳变
浏览器匹配选择器是从右往左的：.a .b .c 要先找所有 .c，再逐层向上验证父级是否存在。每多一层空格嵌套，特异性（specificity）就+1个类级分：
-
.card { &__header { color: red; } }→ 编译为.card__header（0-1-0） -
.card { .header { .title { color: red; } } }→ 编译为.card .header .title（0-3-0） - 4层以上嵌套在 Lighthouse 中直接触发 “Avoid overly specific selectors” 告警
& 符号前有空格 = 主动加权
& 只代表上一层完整选择器字符串，它不“记忆”缩进层级。有没有空格，决定你是在拼类名，还是在构造后代选择器：
- 错误：
.card { .header { &__title { } } }→.header__title（&指向.header，丢失.card上下文） - 更糟：
.card { .header { .title { &.active { } } } }→.card .header .title.active（0-4-0），本意可能是.card__title.active - 正确：
.card { &__header { &__title { } } }→.card__header__title（0-1-0），但注意 BEM 规范不鼓励 Element 嵌套 Element
ID选择器混入嵌套是权重炸弹
ID 单个就值 100 分（0-100-0），一旦进嵌套，权重直接失控：
-
#app { .user-panel { .btn { } } }→#app .user-panel .btn（0-101-1） - 后面加 10 个 class 都压不住它，
!important成了唯一解 - Vue/React 项目中，
id应只用于锚点或 ARIA 关联，样式控制一律用class或data-属性 - 第三方库带 ID 样式？用属性选择器覆盖：
[data-editor="quill"] .ql-toolbar，比#quill-editor .ql-toolbar安全得多
@media 和 @extend 会在编译期偷偷放大权重
媒体查询和继承机制本身不提升优先级，但嵌套写法会让它们把整条祖先链一起复制进去：
-
.btn:hover { @media (max-width: 768px) { color: red; } }→ 编译为@media { .btn:hover { } }（权重比顶层.btn:hover高一级） - 正确写法：
.btn:hover { @at-root (with: media) { @media (max-width: 768px) { color: red; } } }→ 输出平级规则 -
@extend %flex-center在.modal .overlay .content里调用 → 编译出.modal .overlay .content { display: flex; }（0-3-0），而非预期的.content { } - 替代方案：
@mixin flex-center只复制声明，不拼选择器
真正难的不是控制嵌套层数，而是每次敲 { 前问一句：这个空格，是业务语义必需的，还是仅仅因为“HTML里它就在里面”？VS Code 里 Ctrl+Click 直接跳转到编译后 CSS，看生成的选择器字符串——别靠缩进猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
