Using the & operator in Scss - html

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?
}
}
I don't know if I'm using the & operator the wrong way, but if you look at the styling for slider__slide and the &--active inside of it. Why doesn't &--active not inherit all the other styles defined in slider__slide?
You can checkout the codepen here

Answer 1

Because there are two different classes, .slider__slide and .slider__slide--active.
You have to inherit parent class in this case
.slider__slide {
background: blue;
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
&--active {
#extend .slider__slide;
opacity: 1;
}
}
or another way, you have to use two classes for modifying element:
<div class="slider__slide slider__slide--active"

Answer 2

This is not how it works. Applying the & operator means, the additional class has to be set as well! It's not a string concatenation.
so this code:
.slider__slide {
&.--active {
opacity: 1;
}
}
will be converted into this css:
.slider__slide.--active {
color: blue;
}
which will apply to this markup code:
<!--markup with two classes 'slider__slide' and '--active'-->
<div class="slider__slide --active">
but NOT this markup code:
<!--markup with single class 'slider__slide--active'-->
<div class="slider__slide--active">
Also see the updated pen

Answer 3

You need to add the full name in active and it will work
.slider__slide {
background: blue;
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
&.slider__slide--active {
opacity: 1;
}
}

Answer 4

For simple explanation
SCSS
.some-class {
width: 100px;
height: 200px;
&--modified {
height: 300px;
}
}
This will be analog of SCSS code in CSS
.some-class {
width: 100px;
height: 200px;
}
.some-class--modified {
height: 300px;
}
If you use only ".some-class--modified" in HTML obviously it will not add "width" from ".some-class" because they are completely different classes.

Answer 5

It's because you have applied background: blue; on class .slider__slide and not on .slider__slide--active.
You should be using parent class as well and then the modifier with it
<div class="slider__slide slider__slide--active"> so it inherits the parent styles as well.

Answer 6

use &:active inside the class in which you want to use active.
.slider__slide {
background: blue;
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
&:active {
//styles when active
}
&:hover{
// styles when hovered
}
}