SCSS嵌套不能提供真正局部作用域，仅通过唯一父类名（如.user-profile-card）配合&和BEM命名（&__header）模拟作用域边界；父类名须全局唯一，HTML结构必须严格匹配，否则样式失效或泄漏。
SCSS 本身不提供类似 CSS Modules 的局部作用域机制，所谓“通过父选择器嵌套实现局部作用域”本质是人工模拟命名空间，不是真正的作用域隔离。 它依赖开发者自觉约定和结构约束，一旦嵌套层级被打破或选择器被复用，样式就会泄漏。下面说清楚怎么做、为什么有限制、以及哪些地方容易翻车。
用 & 嵌套 + 唯一父类名构造作用域边界
核心思路是：给组件外层容器加一个语义明确、全局唯一的 class（如 .user-profile-card），所有内部样式都以它为根进行嵌套，借助 & 保证生成的选择器始终带这个前缀。
示例：
.user-profile-card {
padding: 1rem;
<p>&__header {
margin-bottom: 0.5rem;
}</p><p>&__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}</p><p>&__name {
font-weight: bold;
}
}
编译后生成的是 .user-profile-card__header、.user-profile-card__avatar 等完全独立的选择器，不会影响其他组件。关键点：
立即学习“前端免费学习笔记（深入）”；
- 父类名必须全局唯一，不能用
.card或.box这类泛化名 - 必须用
&__xxx（BEM 风格）或& .child显式声明子元素，不能只写.header - 避免在嵌套中使用标签选择器（如
div、h2），否则会失去作用域控制力
为什么不能靠单纯缩进嵌套来“限定作用域”
很多人误以为这样就能隔离样式：
.user-profile-card {
.header { color: #333; }
.avatar { border: 1px solid #eee; }
}
问题在于：.header 和 .avatar 仍是全局 class，只要页面其他地方也用了这两个类名，样式就会生效。SCSS 编译后生成的是 .user-profile-card .header，它只是增加了优先级，并未阻止 .header 在别处被匹配。常见后果：
- 第三方 UI 库的
.modal或.btn被意外覆盖 - 同名 class 在不同组件中产生样式冲突
- 重构时不敢重命名子类，因为不知道是否被外部 JS 或其他 SCSS 引用
配合 @use 和命名空间进一步降低泄漏风险
即使写了 BEM 风格，如果多个 SCSS 文件都定义了 .user-profile-card，仍可能因重复引入导致样式叠加。用 @use 可强制模块化引用：
// _profile.scss
.user-profile-card {
&__header { /* ... */ }
&__avatar { /* ... */ }
}
// component.scss
@use 'profile' as profile;
<p>// 必须显式通过命名空间调用
.profile-user-profile-card {
@extend %reset-styles;
}
注意：@use 不会自动注入 CSS，它只提供命名空间和混入（mixin）访问能力；真正输出样式仍需在主文件中 @include 或直接写选择器。真正起作用的还是前面那个唯一父类名——@use 只是帮你管住“谁有权定义它”。
最常被忽略的一点：HTML 结构必须严格对应 SCSS 中的嵌套逻辑。比如 SCSS 里写了 &__avatar，但 HTML 中写成 <img class="avatar">，那这个样式就永远不生效。作用域模拟不是编译器特性，而是人、HTML、SCSS 三方对同一套命名规则的共同遵守。
