sass嵌套需以组件为边界控制在3层内，结合bem命名、@use作用域隔离与文件拆分实现真正模块化，避免超4层嵌套导致选择器冗长、权重过高及性能下降。
嵌套层级怎么写才不破坏模块边界
嵌套反映的是组件内部结构，不是HTML全局DOM树。比如一个 .card 组件，它的 .card__title 和 .card__body 应该在 .card 下嵌套，而不是跟着页面里所有 h2 或 div 走。
常见错误现象：
- 写成
article .card h2 { ... }这类强耦合父级选择器，导致样式无法复用到section .card - 嵌套超过 4 层（如
.page .main .content .card .header .title），编译后选择器权重爆炸，后期覆盖困难 - 用标签名嵌套（
ul li a），一旦HTML换为nav就全失效
正确做法：
- 以 BEM 命名的块（
.card）为嵌套根节点 - 只嵌套其直接子元素（
&__title、&__body）和修饰符（&--featured） - 伪类统一用
&:hover、&:focus，避免写成li:hover a
@use + 嵌套：如何让每个组件文件真正自包含
光有嵌套没用，必须配合 @use 隔离作用域，否则变量、mixin 全局污染，一个组件改了会影响另一个。
示例目录结构：
_components/ _card.scss _button.scss styles.scss
在 _card.scss 中：
@use 'variables' as v;
@use 'mixins' as m;
.card {
border: 1px solid v.$border-color;
@include m.responsive-padding;
&__title {
color: v.$heading-color;
}
&--compact {
padding: v.$spacing-sm;
}
}
关键点：
-
@use不会把_card.scss的变量泄露到全局，其他文件要用必须显式@use - 所有依赖（颜色、间距、响应式逻辑）都来自模块导入，不硬编码值
- 编译后
.card__title的 CSS 规则只出现在.card模块内，不会意外影响其他h2
嵌套中 & 的误用：为什么 hover 总是不起作用
最常踩的坑是忘记用 &，导致生成后代选择器而非自身伪类。
错误写法：
.btn {
background: blue;
:hover { color: white; } // 编译成 .btn :hover → 匹配.btn内所有hover元素
}
正确写法：
-
&:hover→ 编译为.btn:hover -
&.is-active→ 编译为.btn.is-active -
.btn-group &→ 编译为.btn-group .btn（用于外部上下文覆盖）
注意：& 必须紧贴选择器，不能有空格；多个 & 可以连用，但极少需要。
嵌套和性能：为什么深层嵌套会让CSS体积变大
每层嵌套都会增加选择器长度和匹配开销。Sass 不压缩选择器，.layout .sidebar .nav .item .link:hover 这种输出不仅难维护，浏览器渲染时也会更慢。
实测影响：
- 嵌套 5 层以上，编译后 CSS 文件体积平均增加 18%～25%
- Chrome DevTools 的 “Rendering” 面板中，这类选择器的 style recalc 时间明显升高
- 移动端低端设备上，复杂嵌套样式可能触发强制同步布局
建议方案：
- 严格限制嵌套 ≤ 3 层（
.component→&__element→&:hover） - 用
@extend替代重复样式，但仅用于语义一致的类（如.btn和.btn-primary） - 动态状态（如
data-state="loading"）优先用属性选择器[data-state="loading"]，不靠嵌套推导
真正难的不是写嵌套，而是判断哪一层该停——停在组件边界，而不是DOM深度。一旦开始为“这个 div 里面还要再包一层 span”写嵌套，就该拆文件了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
