SASS嵌套易导致选择器权重过高和样式冲突，应控制嵌套层级、使用BEM命名、合理运用&符号、隔离第三方样式并利用占位符优化输出，保持CSS简洁可控。
在使用SASS进行CSS开发时，选择器嵌套虽然提升了代码可读性和结构清晰度，但也容易引发层级过深、选择器权重过高或与现有CSS规则冲突的问题。尤其是当SASS编译后生成的CSS与项目中已有的CSS选择器发生优先级竞争时，样式表现可能不符合预期。以下是几种常见冲突场景及对应的解决策略。
理解SASS嵌套导致的选择器权重上升
SASS的嵌套语法会自然增加CSS选择器的特异性（specificity）。例如：
.container {
.header {
color: blue;
}
}
会被编译为：
.container .header {
color: blue;
}
如果页面中已有 .header { color: red; } 这样的全局规则，由于 .container .header 的选择器权重更高，将覆盖原有样式，造成意外覆盖。
立即学习“前端免费学习笔记（深入）”；
解决方案：
- 避免过度嵌套，控制嵌套层级不超过3层。
- 使用类名命名规范（如BEM）减少依赖嵌套来限定作用域。
- 在需要复用的组件中，尽量使用扁平结构，通过语义化类名区分上下文。
合理使用 & 符号控制层级关系
SASS中的 & 代表父选择器，灵活使用它可以避免不必要的层级叠加，同时精确控制生成的选择器结构。
例如，你想为同一个元素添加状态类，应这样写：
.btn {
&.is-active {
background: green;
}
}
编译结果为 .btn.is-active，不会增加额外父级，避免了类似 .container .btn.is-active 这种高权重选择器的生成。
若需生成兄弟或子元素选择器，也可结合 & 精确表达：
.card {
& + & {
margin-top: -1px;
}
}
生成 .card + .card，用于相邻卡片边框合并，既简洁又可控。
隔离第三方样式与本地SASS模块
项目中引入第三方库（如Bootstrap、Tailwind）时，其CSS可能被你的SASS嵌套无意覆盖，或反过来干扰你的组件样式。
应对方法：
- 将第三方样式在入口文件中独立引入，并置于所有自定义样式的前面，确保其基础性。
- 使用CSS Modules或Scoped CSS（如Vue中的scoped）隔离组件样式，避免全局污染。
- 在SASS中为自定义组件设定命名空间，例如以 c- 或 ui- 开头，降低类名冲突概率。
利用空嵌套或占位符临时解耦结构
有时为了保持HTML结构清晰，不得不保留某些嵌套逻辑，但又不希望输出多余的选择器。可以使用SASS的占位符选择器 %placeholder 或条件嵌套控制输出。
例如：
%base-button {
padding: 8px 12px;
border: 1px solid #ccc;
}
.primary-btn {
@extend %base-button;
background: blue;
}
这样只有实际使用的类才会被输出，避免生成无用的选择器，也降低了权重堆积风险。
基本上就这些。关键是在开发中保持对编译结果的关注，定期检查生成的CSS是否合理，避免“写得方便”却“输出臃肿”。SASS的强大在于控制力，而不是放任嵌套。
