Why is this not workin on SCSS - css

Question

I am trying to make this to work and I don't why isn't working since this is one of the idiosyncrasies of SCSS:
This is the HTML:
<div class="btn btn-wrapper">
<div class="btn-container mob-only">
<a class="btn btn-red" href="#" target="_blank">
<span class="mob-only">Schedule Appointment</span>
</a>
</div>
</div>
SCSS:
.btn {
&-wrapper {
width: 100%;
// border: 1px solid red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: -7vw 0px;
&-container {
&-red {
color: white;
background: $red;
padding: 10px;
width: 85%;
border-radius: 0;
margin: 10px;
font-size: 7vw;
}
}
}
}
What am I doing wrong?

Answer 1

&- will prepend the parent selector to the rule.
So,
&-wrapper will be .btn-wrapper
&-container will be .btn-wrapper-container
&-red will be .btn-wrapper-container-red
You can solve it by reducing the nesting, but this wont help if you want to select only .btn-red inside .btn-container.
For selecting the most relevant element and having the same nesting structure like you have, you can create a variable name in the parent selector and assign that in the nesting. I have added both the approaches below.
Approach 1
.btn {
&-wrapper {
width: 100%;
// border: 1px solid red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: -7vw 0px;
}
&-red {
color: white;
background: $red;
padding: 10px;
width: 85%;
border-radius: 0;
margin: 10px;
font-size: 7vw;
}
}
Approach 2
.btn {
$root: &;
#{$root}-wrapper {
width: 100%;
// border: 1px solid red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: -7vw 0px;
#{$root}-container {
#{$root}-red {
color: white;
background: 'red';
padding: 10px;
width: 85%;
border-radius: 0;
margin: 10px;
font-size: 7vw;
}
}
}
}

Answer 2

All your selectors are nested and are extending each other by name. In your case you are generating the three classes .btn, .btn-wrapper and .btn-wrapper-container-red.
You are probably looking to do:
.btn {
&-wrapper { ... }
&-container { ... }
&-red { ... }
}
This will generate the four classes .btn, .btn-wrapper, .btn-container and .btn-red.

Answer 3

at first sight, you nested selectors in a wrong way, your code generates styles for btn-wrapper, btn-wrapper-container, btn-wrapper-container-red, this will generate btn-wrapper btn-container btn-red selectors:
html:
<div class="btn btn-wrapper">
<div class="btn-container mob-only">
<a class="btn btn-container-red" href="#" target="_blank">
<span class="mob-only">Schedule Appointment</span>
</a>
</div>
</div>
scss:
.btn {
&-wrapper {
width: 100%;
// border: 1px solid red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: -7vw 0px;
}
&-container {
&-red {
color: white;
background: $red;
padding: 10px;
width: 85%;
border-radius: 0;
margin: 10px;
font-size: 7vw;
}
}
}