How to make the css child class inherits the parent css class

Question

I need to the child css class inherit the properties from their parent css class

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

  &--home {
    margin: 10px;
  }

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

I need to apply the parent class and the margin:10px; to the element that have the avatar--home class like that :

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

This is applying just the margin: 10px; and ignoring the parent properties

Answer 1

Preprocesser's & symbol copies the parent's name and doesn't copy it's properties.

However, if you want to extend your class, you can use the @extend mixin (for SASS) and :extend(...) (for 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;
  }
}

Additional Links:

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

Or you can do as @howtopythonpls suggested, just add your modifier class (since you are using BEM methodology).

Hope this helps!

Answer 2

Could you not just add the avatar class as well:

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

Otherwise I think you will have to define all the properties again and set them to inherit, as was mentioned in the comments.