SCSS嵌套通过视觉化HTML层级结构避免重复书写父级选择器，提升可维护性但需警惕权重飙升、命名混乱及嵌套过深问题；正确使用&处理伪类、变量统一管理样式，并优先采用BEM等命名规范控制特异性。
SCSS嵌套让导航选择器不再重复书写
传统CSS写导航菜单时，.nav ul、.nav ul li、.nav ul li a这类选择器反复出现，本质是人为模拟HTML层级，但每次都要重敲父级前缀。SCSS嵌套直接把这种层级关系“视觉化”，编译后输出完全等价的CSS，却省去大量机械劳动。
常见错误现象：手写时漏掉某一层前缀（比如写成 li a 而非 .nav ul li a），导致样式不生效且难以定位；多人协作时命名风格不一致，.main-nav 和 .header-nav 混用，嵌套结构一乱就全盘失控。
- 嵌套只生成后代选择器（
>）或兄弟选择器（+、~），这点必须心里有数 - 如果需要子代关系，得显式写出
& > ul，否则默认全是后代 - 嵌套过深（超过4层）会导致编译后选择器权重飙升，可能意外覆盖其他样式
用 & 处理伪类和修饰类更安全
导航菜单高频需要 :hover、:focus、.is-active 这类状态样式。不用 & 的话，容易写出 .nav ul li a:hover 这种冗长写法，还可能误写成 a:hover 丢失作用域。
正确做法是紧贴被修饰元素写 &:hover 或 &.is-active，& 会原样展开为上一级选择器，确保上下文不漂移。
立即学习“前端免费学习笔记（深入）”；
-
&:hover编译为.nav ul li a:hover，不是a:hover -
&.is-open编译为.nav.is-open，适合控制整个导航的展开态 - 避免在嵌套里写全局类名（如
.btn），否则会污染语义——嵌套应专注层级，复用靠@mixin或模块引入
嵌套 + 变量组合能快速响应设计变更
导航菜单的颜色、间距、圆角这些值通常跨多层复用。纯CSS要改5处，SCSS只需改1个变量，所有嵌套层自动同步。
例如：$nav-link-padding: 0.5rem 1rem 在 a { padding: $nav-link-padding; } 中使用，哪怕它嵌在 nav ul li 里面，变量作用域依然有效（SCSS默认块级作用域，嵌套内定义的变量仅限该嵌套块）。
- 颜色变量（如
$nav-bg、$nav-hover-bg）建议提至全局 _variables.scss，避免分散定义 - 不要在嵌套最深层定义同名变量，否则外层同名变量会被遮蔽，调试时容易误判来源
- 嵌套结构本身不提升性能，但减少手动拼写错误，间接降低后期排查成本
注意编译后CSS的选择器权重陷阱
嵌套看起来清爽，但每多一层，编译出的选择器特异性（specificity）就+10。比如 nav ul li a 权重是 0,0,3,1；而 body .layout .nav ul li a 就变成 0,0,4,1 —— 它可能比你本意想覆盖的 .btn-primary（0,0,2,1）还高，结果样式强塞不进去。
这不是SCSS的bug，而是CSS规则本身特性。你写的越深，浏览器匹配越慢，维护者越难预判最终权重。
- 日常开发中，3层嵌套（如
nav > ul > li > a）是较安全的实践上限 - 涉及第三方UI库（如Bootstrap）时，务必查清其选择器权重，避免嵌套过深导致无法覆盖
- 真要写深层结构，优先考虑用BEM命名（
.nav__item--active）代替深度嵌套，语义清晰且权重可控
:hover 死活不生效，才意识到是权重被隔壁组件的 div#app header nav ul li a 给锁死了。 
