Verschachtelung in SASS

Dieser Artikel erklärt die Verschachtelung in SASS.

Wir erklären die Verschachtelung in SASS Schritt für Schritt, einschließlich Beispielcode, um Ihr Verständnis zu vertiefen.

YouTube Video

Verschachtelung in SASS

SASS ist eine erweiterte Stylesheet-Sprache für CSS, die viele Funktionen für effizientes Styling bietet. Unter diesen ist die Verschachtelung besonders nützlich, um die hierarchische Struktur von CSS visuell darzustellen.

Grundlagen der Verschachtelung

In SASS können Sie Ihren Code visuell strukturieren, indem Sie CSS-Selektoren in einer hierarchischen Struktur schreiben. Sehen wir uns zum Beispiel an, wie Sie den folgenden CSS-Code mithilfe der Verschachtelung umschreiben können.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Mit SASS können Sie diesen Code mithilfe von Verschachtelung wie unten gezeigt prägnant schreiben.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• Dieser Code nutzt die Verschachtelungsfunktion von SASS, um die Navigationsmenü-Stile prägnant und hierarchisch zu beschreiben. Durch die Verwendung von Verschachtelung werden die Eltern-Kind-Beziehungen visuell klar und die Lesbarkeit verbessert.

Referenzieren von Elternelementen (Selektoren) (&)

Wenn Sie innerhalb verschachtelter Stile auf den übergeordneten Selektor verweisen müssen, verwenden Sie &. Dadurch können Sie Selektoren mit bestimmten Zuständen oder Modifikatoren erstellen.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• Dieser Code verwendet & in SCSS, um die Zustände :hover und :active für den übergeordneten Selektor .button zu definieren.

Generiertes CSS

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Verschachteln von Media Queries

In SASS können Sie auch Media Queries verschachteln. Dadurch können Sie ein responsives Design umsetzen und gleichzeitig die Relevanz Ihrer Stile erhalten.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• Dieser Code verschachtelt eine Media Query innerhalb der Klasse .container, sodass das responsive Design die Breite je nach Bildschirmgröße anpasst.

Generiertes CSS

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Wichtige Hinweise zur Verschachtelung

Eine übermäßige Verschachtelung kann Ihren Code sehr tief verschachteln und die Wartbarkeit verringern. Sie sollten eine tiefe Verschachtelung wie im folgenden Beispiel vermeiden.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Diese Art von Code ist zu stark verschachtelt und kann daher wie folgt umgestaltet werden.

1.header .nav ul li a {
2    color: red;
3}

Praktisches Beispiel: Navigationsleiste

Unten finden Sie ein Beispiel für das Styling einer Navigationsleiste mit SASS-Verschachtelung.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• Dieser Code organisiert und definiert die Stile für Listen und Links in der Navigationsleiste, einschließlich Hover-Effekten, mit Hilfe der SASS-Verschachtelung.

Generiertes CSS

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Zusammenfassung

Die Verschachtelungsfunktion in SASS ist ein leistungsfähiges Werkzeug, um die hierarchische Struktur von CSS prägnant zu beschreiben und die Lesbarkeit zu verbessern. Es ist jedoch wichtig, übermäßige Verschachtelung zu vermeiden und den Code richtig zu organisieren.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video