如何让css子类继承父css类答案

【问题标题】：How to make the css child class inherits the parent css class如何让css子类继承父css类
【发布时间】：2019-12-28 02:05:51
【问题描述】：

我需要子css类继承父css类的属性

.avatar {
  min-width: 35px;
  max-width: 35px;
  height: 35px;
  flex: 1 1 35px;

  &--home {
    margin: 10px;
  }

  &--post {
    margin: 0px 17px 0px 4px;
  }
}

我需要应用父类和margin:10px;到具有 avatar--home 类的元素：

  <div class="avatar--home"></div>

这只是应用 margin: 10px; 并忽略父属性

【问题讨论】：

你不应该使用property: inherit 例如height:inherit 吗？

标签： html css sass ionic4

【解决方案1】：

预处理器的& 符号复制父级的名称，而不复制它的属性。

但是，如果你想扩展你的类，你可以使用 @extend mixin（用于 SASS）和 :extend(...)（用于 LESS）。

/* SASS */
.avatar {
  min-width: 35px;
  max-width: 35px;
  height: 35px;
  flex: 1 1 35px;
  
  &--home {
    @extend .avatar;
    margin: 10px;
  }
}

/* LESS */
.avatar {
  min-width: 35px;
  max-width: 35px;
  height: 35px;
  flex: 1 1 35px;
  
  &--home:extend(.avatar) {
    margin: 10px;
  }
}

其他链接：

或者您可以按照@howtopythonpls 的建议进行操作，只需添加您的修饰符类（因为您使用的是 BEM 方法）。

希望这会有所帮助！

【讨论】：

【解决方案2】：

你能不能只添加头像类：

<div class="avatar avatar--home"></div>

否则我认为您将不得不再次定义所有属性并将它们设置为inherit，如 cmets 中所述。

【讨论】：

我可以，但我只是想知道是否有办法做类似的事情，呵呵，谢谢伙计
好吧，我很确定孩子不会继承这样的属性。或者，您可以将它们添加到特定样式：.avatar, &--home, &--post { ... }.