嵌套超3层时应删掉最内层而非补&，因会导致样式失效、性能下降（浏览器右向匹配变慢）、特异性暴增、DevTools难调试；4层是性能拐点，须重构为单类名或BEM规范写法。
嵌套超过3层时，Sass不是在帮你组织代码，而是在悄悄埋下样式失效、覆盖困难、调试崩溃的引信——直接删掉最内层嵌套，比补一层&更有效。
嵌套超3层时，浏览器匹配变慢是真问题
浏览器匹配选择器是从右往左的。.page .section .content .card .title这种写法会让它先找所有.title，再逐层向上验证父级是否存在。DOM节点越多、动态更新越频繁，卡顿越明显。Lighthouse报“Avoid overly specific selectors”，根源就在这儿。
- 4层是性能拐点：一旦出现
.a .b .c .d，优先重构为单类名，比如.card__title - 特异性每多一层就+10：
.a .b .c .d比.d难覆盖100倍，后续只能靠!important硬顶 - DevTools里找不到对应规则？大概率是编译后选择器太长，被折叠或误判了
&只认最近一层父选择器，空格决定输出结果
&不是“视觉上的父级”，而是上一层选择器的完整字符串拼接结果。有无空格，输出天差地别。
- 有空格：
.card { .header { &__title { } } }→ 编译出.header__title（&指向.header） - 没空格：
.card { &__header { &__title { } } }→ 编译出.card__header__title（但BEM禁止Element嵌套Element，应改用.card__header-title） - 想保留外层上下文？用变量更可靠：
$block: ".card"; #{$block}__title { color: red; }
该停手时就停手：什么时候必须放弃嵌套
当嵌套开始服务于“DOM位置”而非“语义职责”时，就是重构信号。
立即学习“前端免费学习笔记（深入）”；
- 组件需要被多个不相关容器复用（比如
.tooltip出现在.header和.table-cell里） - 内部有2个以上需独立开关的状态（
is-open/is-error/is-loading） - JS频繁动态增删class（React/Vue中
className绑定逻辑复杂） - 写
div > ul > li > a这类模拟DOM路径的嵌套？直接换成.nav-link语义类名
用@at-root和>主动切断继承链
嵌套里写@media或:not()时，很容易把选择器权重悄悄拉高。用@at-root和子选择器>能明确控制输出结构。
-
.btn:hover { @at-root (with: media) { @media (max-width: 768px) { color: red; } } }→ 输出平级@media规则，不增加权重 -
.card { > .header { > h1 { } } }→ 编译为.card > .header > h1，比.card .header h1更短、权重更低、更易覆盖 -
>在IE8+完全支持，但不适用于需要穿透多层的场景（如全局按钮主题），此时应改用类名或data-属性
真正难的不是让&多嵌两层，而是删掉那一层后，HTML是否仍能准确匹配——如果删了嵌套，.card__title规则还生效，说明你已经走在正确路上；如果失效，问题不在Sass，而在HTML缺失基础Block类名。
