Optimiertes SCSS-Nesting für sauberen und effizienten Code

Lerne, wie man SCSS-Nesting nutzt, um sauberere und besser strukturierte Styles zu schreiben. Der Standardansatz hält Eigenschaften organisiert, während Nesting hilft, die Übersichtlichkeit zu bewahren, indem verwandte Styles gruppiert werden. Verbessere Lesbarkeit und Wartbarkeit mit dieser einfachen SCSS-Technik! 🚀

Standard

1
2
3
4
5

.class {
    background-color: black;
    padding-top: 0.625rem;
    padding-bottom: 1.875rem;
}

Verschachtelt

1
2
3
4
5
6
7
8

.class {
    background-color: black;

    padding: {
        top: 0.625rem;
        bottom: 1.875rem;
    }
}

Beide Varianten kompilieren zum selben CSS (padding-top / padding-bottom). Die verschachtelte Schreibweise ist Sass-spezifisch (“nested properties”) und funktioniert weiterhin in Dart Sass.