VSCode selecting SCSS class does not work - html

Question

Hello I have a problem with SCSS when I want to choose class with double ' - ' it does not work. Sidebar class has an orange class but --active is red. If i use only one '-' it is ok. Anyone knows why?
.sidebar {
position: absolute;
top: -10;
left: 0;
height: 70vh;
max-width: 10vh;
background-color: white;
&--active {
margin: 10rem;
}
&--icon {
width: 3rem;
}
HTML:
<div class="sidebar">
<svg class="sidebar--icon"><use href="{% static 'home/sprite.svg' %}#icon-user"></use></svg>
<svg class="sidebar--icon"><use href="{% static 'home/sprite.svg' %}#icon-menu"></use></svg>
</div>

Answer 1

You can use this link for reference- SCSS documentation. Both .sidebar-icon or .sidebar--icon classes are fine and will work.
The :active pseudo-selector is a CSS property and to use it the convention will be &:active which in CSS translates to .sidebar:active. If you want to use :active on the sidebar--icon, then you have to apply &:active to the inner nested child.
Please check this example with sample circle icons:
<div class="sidebar">
<svg class="sidebar--icon" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
</svg>
<svg class="sidebar--icon" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
</svg>
</div>
CSS:
.sidebar {
position: absolute;
top: 0;
left: 0;
height: 50vh;
max-width: 10vh;
background-color: white;
&:hover {
margin: 1rem;
background-color:orange;
}
&--icon {
width: 20rem;
margin-right: 2px;
&:hover{
width: 15rem;
}
&:active{
border: 1px solid blue;
}
}
}