SASS Schnellstart – Nesting: Was ist das?

SASS Nested Rules ermöglichen es uns, verschachtelte Regeln zu schreiben , indem wir die geschweiften Klammern verwenden, um die Stilregeln für verschachtelte Elemente genau wie in HTML einzuschließen.

Verschachtelte Regeln machen es einfacher, CSS-Code zu schreiben und machen die Stilregeln lesbarer.

In HTML haben wir verschachtelte und visuelle Hierarchien. Wenn wir zum Beispiel eine Liste erstellen, verwenden wir den <li> Tag, um Listenelemente innerhalb des <ul> oder <ol> Tags zu erstellen. Aber CSS unterstützt eine solche verschachtelte Syntax nicht.

Nehmen wir an, wir haben folgende Liste und ihre Elemente in der Sidebar einer Webseite mit dem folgenden HTML-Code:

<div id="sidebar">
    <ul>
        <li>Blog</li>
        <li>Online-Kurse</li>
        <li>Deals</li>
        <li>News</li>
        <li>Forum</li>
    </ul>
</div>

Den CSS-Code für diese Liste würden wir wie folgt schreiben:

#sidebar {
   float:left;
   width:25%;
   background-color:lightblue;
   padding: 30px 10px;
}

#sidebar ul { 
   list-style-type: none; 
   margin: 0; 
   padding: 0; }

#sidebar li { 
   padding: 6px; 
   margin-bottom: 10px; 
   background-color: #10A2FF; 
   color: #ffffff; 
}

In SASS/SCSS können wir verschachtelten Regeln (Nested Rules) nutzen, um dies auf eine lesbarere Weise zu tun.

SASS/SCSS:

#sidebar {
    float: left;
    width: 25%;
    background-color: lightblue;
    padding: 30px 10px;

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li {
        padding: 6px;
        margin-bottom: 10px;
        background-color: #10A2FF;
        color: #ffffff;
    }
}

Wie du siehst ist der SASS-Code um einiges lesbarer als reines CSS.