html - 在 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>

SCSS:

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 中定义的所有其他样式？

您可以查看codepen here

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"