Целевой брат с модификатором

Question

У меня есть класс .track с классом bem &__waveform, внутри которого должно быть возвращено .track__waveform, но родительский класс .track также может иметь .active на нем, как мне настроить таргетинг &__waveform внутри модификатора .active?

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

Мне нужно вывести

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

Я могу сделать это, просто поместив полный класс .track__waveform внутри класса .active, но я чувствую, что должен быть способ использовать детский комбинатор.

Answer 1

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

Answer 2

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

вот и все ...

Answer 3

Класс .active должен быть модификатором: .track--active

Таким образом, необходимый селектор должен быть .track--active track__waveform.

Один из способов сделать это с вложением sass:

.track {
    $block: &;

    &--active {
        #{$block}__waveform {
            display: block;
        }
    }
}