SCSS中@extend继承类后，如何让扩展类样式覆盖基类？

嘿，这个问题我碰到过！咱们先拆解下原因：

你给出的编译后CSS是：

.a, .b { height: 100px; width: 100px; }
.b { height: 200px; }

理论上，当元素同时有.a和.b类时，.b的height:200px应该会覆盖前面的100px——毕竟两个选择器权重相同，CSS会取后声明的规则。如果你实际看到的是100px，要么是编译后的CSS顺序搞反了，要么是有其他样式干扰，但咱们可以用几种可靠的方法确保.b的高度生效：

方案1：提升.b选择器的优先级 #

让.b的选择器更具体，就能稳稳覆盖通用的组合规则：

.a { height: 100px; width: 100px; }
.b { 
  @extend .a; 
  // 用自身类重复的方式提高权重
  &.b {
    height: 200px;
  }
}

编译后的CSS会变成：

.a, .b { height: 100px; width: 100px; }
.b.b { height: 200px; }

.b.b的权重比.a,.b更高，不管规则顺序如何，都会优先应用200px的高度。

方案2：替换@extend为@mixin（更灵活） #

如果继承不是硬性要求，用混合宏可以避免规则合并带来的顺序问题：

@mixin base-box {
  height: 100px;
  width: 100px;
}
.a { @include base-box; }
.b { 
  @include base-box;
  height: 200px;
}

编译后.b的样式里，后写的height:200px会直接覆盖同规则里的100px，元素同时有.a和.b时，.b的规则和.a权重相同，但后声明的话就会生效。

方案3：调整规则顺序（不推荐，易出问题） #

如果你能保证.b的单独规则在.a,.b组合规则之后，理论上就能覆盖，但这种方法太依赖编译顺序，一旦样式结构变动就可能失效，所以不建议作为长期方案。

方案4：用!important（迫不得已时用） #

如果以上方案都不适用，可以临时用!important强制生效，但要注意这会破坏CSS的优先级机制，后期维护容易踩坑：

.b { 
  @extend .a; 
  height: 200px !important;
}

总的来说，方案1和方案2是最稳妥的，你可以根据自己的项目场景选~

内容的提问来源于stack exchange，提问作者Joey Yi Zhao