嵌套规则应限制在3层内，用&正确拼接（有空格为后代，无空格为伪类/子类），避免重复父类名；@extend失效主因是占位符未被实际引用或跨模块滥用；@mixin更适配动态选择器逻辑，需设默认值、慎用@content与@at-root。
嵌套规则怎么写才不会生成冗余选择器
直接用 & 嵌套是最快的方式，但容易写出过深、过长的选择器。比如在组件内部连续嵌套 4 层，最终生成的 CSS 选择器可能带 5 个类名，既难维护又影响性能。
实操建议：
- 单个选择器嵌套不超过 3 层（如
.card→&__header→&--active），超出就该拆成独立选择器或用@extend - 避免在嵌套中重复写父类名，比如
.btn { .btn:hover { ... } }是错的，应写成.btn { &:hover { ... } } - 用
&显式拼接时注意空格：有空格是后代选择器（& .icon），没空格是伪类/子类（&:hover或&__text）
用 @extend 复用样式时为什么有时不生效
@extend 不是复制属性，而是合并选择器。如果被继承的占位符（%reset）本身没被任何实际选择器引用，Sass 编译器会直接丢弃它，导致 @extend %reset 看似“失效”。
常见错误现象：
- 编译后 CSS 里完全找不到对应样式 —— 检查是否只定义了
%reset却没在任何.class或div中调用它 - 扩展后选择器爆炸（如
.a, .b, .c, .d, .e, .f {...}）—— 避免跨模块@extend，尤其不要在_mixins.scss里定义占位符然后到处 extend - 与
!important冲突 ——@extend无法继承带!important的声明，得改用@mixin
如何用 @mixin 安全地抽象复杂选择器逻辑
当选择器需要动态拼接、条件判断或接受参数时，@mixin 比 @extend 更可控。比如 BEM 的修饰符组合、响应式断点嵌套、主题色切换等场景。
实操建议：
- 带参数的 mixin 要预设默认值，例如：
@mixin card-theme($bg: #fff, $border: 1px solid #ccc) { background: $bg; border: $border; } - 避免在 mixin 内部写深层嵌套，把结构控制权留给调用方；真正需要嵌套的地方，用
@content透传 - 慎用
@at-root跳出嵌套：它会让样式脱离上下文，调试时容易找不到来源，仅在必须提级到 HTML 或 body 下时才用
Sass 编译后选择器权重变高怎么办
嵌套和 @extend 都会提升选择器特异性（specificity）。比如 .nav ul li a:hover 的权重远高于 .link--primary，后续覆盖会越来越难。
关键判断点：
- 打开浏览器开发者工具，看 computed 样式里哪条被划掉 —— 如果是自己写的，大概率是 specificity 太高
- 用
!default控制变量优先级，比靠选择器权重硬刚更可持续 - 真要覆盖第三方库样式时，宁可加一个轻量 class（如
.override），也不要用 5 层嵌套强行提高权重
越想靠嵌套“省代码”，后期越容易被 specificity 绑架。真正简化的不是写法，而是对选择器职责边界的认知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
