html - 如何让css子类继承css父类

Question

我需要子 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;并忽略父属性

Answer 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;
  }
}

其他链接:

• Is it possible to include the parent properties in an extended Sass class?
• Does LESS have an "extend" feature?

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

希望这有帮助!