Search code examples
htmlcsssassbem

Target sibling from modifier

I have a class of .track with a bem class of &__waveform inside it should return .track__waveform, but the parent .track class can have an .active on it as well, how do I target &__waveform inside of the .active modifier?

.track {
  &__waveform {
    display: none;
  }
  &.active {
   &__waveform {
    display: block;
   }
  }
}

I need it to output

.track.active .track__waveform {
  display:block;
}

I can do it just by putting the full .track__waveform class inside of the .active class, but I feel there should be a way to use a child combinator.

Solution 

  • .track {
    &.active {
        .track__waveform {
            display: block;
        }
    }
}

    that's all...