Search code examples
sassparent-childbem

Sass BEM modifiers and children

I have the following BEM setup:

  .mytable {
      font-size: 16px;
        margin: 30px 0;
      &--standard {
        border: 1px solid red;
        &__row {
          border: 1px solid blue;
        }
      }

What I am trying to do is apply the row styles only to the modified table class.

This outputs the following

.mytable--standard__row {
  border: 1px solid blue;
}

Which is obviously not what I am trying to achieve.

Is there a neat/standard way to solve this problem?

Solution

  • You can add another ampersand after the modifier to get the desired output:

    .mytable {
  font-size: 16px;
  margin: 30px 0;

  &--standard {
    border: 1px solid red;
  }

  &--standard & { //<-- 

    &__row{
      border: 1px solid blue;
    }

    &__some-other-element{}

  }

}