修饰符的目标同级

Question

我有一个 .track 的 class 和一个 &__waveform 的 class 里面应该 return .track__waveform，但是父.track class 也可以有一个 .active，我如何在 .active 修饰符内定位 &__waveform？

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

我需要它来输出

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

我可以通过将完整的 .track__waveform class 放在 .active class 中来做到这一点，但我觉得应该有一种使用子组合器的方法。

Answer 1

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

Answer 2

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

就这些了...

Answer 3

.activeclass应该是一个修饰符：.track--active

所以需要的选择器应该是.track--active track__waveform。

使用 sass 嵌套的一种方法是：

.track {
    $block: &;

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