如何扩展SCSS类并为继承属性添加!important标记？

直接用@extend没法给继承的属性批量添加!important——因为@extend只是将选择器合并（编译后会变成.aClass, .bClass { ... }），无法单独为.bClass的属性追加标记。更合理的方式是用**混合宏（Mixin）**封装公共属性，再分别为两个类调用：

步骤1：封装公共属性到Mixin #

把.aClass的所有属性放到一个Mixin里：

@mixin a-class-props {
  min-height: 500px;
  // ... 其他需要复用的CSS属性
}

步骤2：生成原类和目标类 #

分别调用Mixin生成.aClass和.bClass，给.bClass的调用加上!important：

// 原类，正常使用属性
.aClass {
  @include a-class-props;
}

// 目标类，所有属性带!important
.bClass {
  @include a-class-props !important;
}

编译后的CSS效果 #

最终会生成两个独立的类，.bClass的所有属性都带有!important：

.aClass {
  min-height: 500px;
  /* ... 其他原属性 */
}

.bClass {
  min-height: 500px !important;
  /* ... 其他属性均带!important */
}

这种方式既保证了代码复用，又能轻松实现批量添加!important的需求，后续修改公共属性也只需维护Mixin即可。

内容的提问来源于stack exchange，提问作者yalpsid eman