Nested CSS: So benutzt du es
Nested CSS nutzt du direkt im Eltern-Block mit & für States, Klassen und Elemente.
.card {
padding: 1rem;
border: 1px solid var(--border);
& h2 {
margin: 0 0 0.5rem;
}
&:hover {
border-color: var(--accent);
}
&.is-featured {
background: var(--surface-highlight);
}
@media (min-width: 48rem) {
padding: 1.5rem;
}
}Damit bleiben Elemente, Hover-State und Responsive-Anpassung direkt an der Komponente.
In manchen Fällen wird damit SCSS für genau solche Verschachtelungen obsolet.