在 Scss 中使用 & 运算符

Question

HTML：

<div id="carousel" class="slider__container">
  <div class="slider__slide">
    <span>Slide One</span>
  </div>
  <div class="slider__slide--active">
    <span>Slide Two</span>
  </div>
  <div class="slider__slide">
    <span>Slide Three</span>
  </div>
</div>

社会保障体系：

body {
  background-color: #7e57c2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.slider__container {
  background: red;
  min-height: 250px;
  width: 200px;
  position: relative;
}

.slider__slide {
  background: blue;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;

  &--active {
    opacity: 1; // Why doesn't this inherit the background colour and all other styles?
  }
}

我不知道我是否以错误的方式使用了运算符，但是如果你看看它的&样式slider__slide和内部。&--active为什么不&--active继承 中定义的所有其他样式slider__slide？

您可以在此处查看代码笔

Answer 1

因为有两个不同的类.slider__slide和.slider__slide--active。在这种情况下你必须继承父类

.slider__slide {
  background: blue;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;

  &--active {
    @extend .slider__slide;
    opacity: 1;
  }
}

或者另一种方式，您必须使用两个类来修改元素：

<div class="slider__slide slider__slide--active"