来自修改器的目标同级

Question

我有一个.track类，其内部有一个&__waveform的bem类，应该返回.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;
        }
    }
}