Syntax scss
.a {
background-color :red;
&.b{
background-color: green;
}
&-c{
background-color: blue;
}
.d{
background-color: yellow;
}
}
//ab c d
//b
//
<div class="a b">
</div>
<div class="a">
<div class="b">
</div>
</div>
<div class="b">
</div><div class="a b">
</div> & means to refer to the parent selector. If there is one, it means that the reference is not in the same element
.a {
.d{
background-color: yellow;
}
}indicates that an and d are applied to father-son or grandfather-descendant nodes
</div>
</div>Previous: Which is the better performance of controlled or uncontrolled components?
Next: How to prevent github pages from using https automatically