sass编译后层级过深主因是嵌套超3层、&误用空格及未采用bem命名；浏览器从右往左匹配选择器，5层嵌套如.layout .sidebar .nav .item .link会显著拖慢渲染，特异性升至0-5-0，lighthouse报“avoid overly specific selectors”即源于此。
直接说结论：Sass编译后层级过深，90%是因为嵌套超过3层 + & 误用空格 + 没用BEM语义命名；不是写法不熟，而是没看清&到底拼出了什么CSS。
为什么嵌套3层就该停手
浏览器匹配选择器是从右往左的。.layout .sidebar .nav .item .link 这种5层后代选择器，会让浏览器先找所有 .link，再逐层向上验证父级是否存在——DOM越深、更新越频繁，卡顿越明显。Lighthouse报“Avoid overly specific selectors”就是这个原因。
- 每多一层嵌套，特异性（specificity）就+1个类级分：
.card { .header { .title { } } }→.card .header .title（0-3-0），而.card__title只有0-1-0 - Sass官方推荐嵌套上限是3层：容器 → 组件 → 状态/伪类（如
&:hover、&--active） - 用VS Code按住
Ctrl点击编译后的CSS文件，直接看生成结果——别靠缩进猜
& 前有没有空格，决定你是拼接还是嵌套
&永远只代表**紧邻上一层的选择器字符串**，不是“视觉上的父级”。有无空格，输出天差地别。
- 有空格：
.card { .header { &__title { } } }→ 编译出.header__title（&指向.header，不是.card） - 没空格：
.card { &__header { &__title { } } }→ 编译出.card__header__title（纯BEM拼接，但注意：BEM规范禁止Element嵌套Element，应改用.card__header-title或拆成独立块） - 想保留外层上下文？用变量暂存：
$block: ".card"; #{$block}__title { color: red; }
用 @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-属性
什么时候该放弃嵌套，改用 %placeholder 或 @mixin
当嵌套开始服务于“DOM位置”而非“语义职责”时，就该停手了。比如article section p em这种写法，本质是样式逻辑错位。
- 复用基础样式（居中、清浮动、隐藏文本）用
%placeholder：%flex-center { display: flex; justify-content: center; }，然后.card { @extend %flex-center; }——它不输出冗余选择器链 - 带参数或计算逻辑（如
calc()、响应式断点）必须用@mixin，@extend无法处理运行时值 - 禁用跨文件
@extend：%flex-center必须定义在所有调用它的文件之前，且通过@use "shared" as shared显式导入，否则报错Undefined placeholder selector "%flex-center"
真正难的不是写对&，而是每次敲下{前，得问一句：这个嵌套，最终会生成什么CSS？它是否真的比一个扁平类名更可控、更易覆盖、更少回溯？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
