Nested Component Selectors

Nest descendant, state, and pseudo-element rules inside their owning selectors instead of repeating flat selector paths.

Correct

.footer {
    .cta {
        &:hover {
            color: var(--interactionColor);
        }
    }
}

Incorrect

.footer .cta:hover {
    color: var(--interactionColor);
}

Fix

Move the descendant or state rule inside its owning selector and use & for states and pseudo-elements.