Whenever you declare a new rule inside another rule it is called nesting. With basic nesting, as shown below, the nested selector will be compiled as a new CSS selector with all its parents prepended, separated by a space.
// SCSS
.parent {
margin: 1rem;
.child {
float: left;
}
}
// CSS output
.parent {
margin: 1rem;
}
.parent .child {
float: left;
}