sass嵌套超三层时&指向不可靠，如.card {.header {.title {&.active}}编译为.card .header .title.active（0,0,3,0），非预期的.card__title.active；因&仅指上一层选择器，空格决定拼接或后代，需ctrl+click验证输出，优先用bem平铺替代。
嵌套超过三层时，& 指向已经不可靠
你写 .card { .header { .title { &.active { } } } }，本意是生成 .card__title.active，但实际编译出的是 .card .header .title.active（权重 0,0,3,0）。因为 & 在这里指向的是 .title，不是 .card —— 它只认“上一层”，不认“最外层”。
常见错误现象：改一个状态类，发现加了 !important 才生效；DevTools 里看到样式被划掉，但找不到覆盖源。
-
&前有空格 → 后代选择器（.a .b）；没空格 → 拼接（.a-b） - 嵌套越深，
&的“上一层”越容易脱离语义预期，尤其在@mixin或@include调用链中 - 验证方式：VS Code 中 Ctrl+Click 跳转到编译后 CSS，直接看生成的选择器字符串和权重
@at-root (with: media) 不是万能提级，但能防媒体查询抬权
在 .btn:hover { @media (max-width: 768px) { color: red; } } 里，@media 默认被包进 .btn:hover 内部，编译结果是 @media { .btn:hover { color: red; } } —— 这个选择器权重比顶层 .btn:hover 高一级，且无法被同名类正常覆盖。
用 @at-root (with: media) 可强制把媒体查询提级，但注意：with: 后只能跟 media、rule、all，不能写 screen 或自定义断点名。
- 它解决的是“媒体查询导致的被动抬权”，不是给四层嵌套打补丁
-
@at-root提级后，&失效（上下文丢失），需显式拼接或提前存变量，例如$block: ".card"; #{$block}__title - 若媒体查询内还含伪类（如
&:hover），提级后可能变成孤立选择器，需重新校验 DOM 匹配路径
用 %placeholder 替代 @extend 深层复用
@extend %title 在嵌套块里会把 %title 的原始选择器原样拼到当前路径末尾。比如 .modal .overlay .content { @extend %text-center; } 编译后可能是 .modal .overlay .content, .modal .overlay .content .text-center —— 权重从 0,0,1 直接跳到 0,0,3。
%placeholder 本身不输出 CSS，只在 @extend 时合并声明，但前提是它不能出现在 @media 块内，也不能带伪类（%btn:hover 会报错）。
- 安全用法：扁平结构下定义
%flex-center { display: flex; justify-content: center; }，再在单类名中@extend %flex-center - 禁止在多层嵌套中
@extend同一个占位符，否则同一段声明会在多个高权重选择器下重复输出 - 更可控的替代方案是
@mixin：它只复制声明，不拼选择器，.card__title { @include text-emphasis; }输出零新增权重
BEM 平铺结构比嵌套更早止损
与其花时间调试 .page .layout .main .content .text p 为什么失效，不如一开始就写 .content-text。BEM 不是加长名字，而是把 DOM 层级“翻译”为类名内部结构，让浏览器一次匹配到位。
关键判断点：只要你在 SCSS 里写了三层以上缩进，就该停笔，问自己——这个元素是否真需要靠父级定位？还是它本就有独立语义？
- 块名必须是功能单元（
.product-card✅，.card❌） - 元素名用双下划线，且只属于直属子节点（
.product-card__title✅，.product-card__header__logo❌） - 修饰符用双短横表达状态（
.product-card--featured✅，.product-card--bg-blue❌，颜色应抽为 CSS 变量）
真正难的不是写四层嵌套，而是改——当 .modal .overlay .content .form .input:focus 出现冲突时，你得先猜哪一层出了问题，再查编译结果，最后回溯 SCSS 逻辑。而一个 .form-input:focus，一眼就定位，权重恒定，覆盖成本低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
