Das nächste leistungsstarke Feature ist das Verschachteln. Es ermöglicht, einen Selektor innerhalb eines anderen zu verschachteln, um einen besser organisierten und lesbaren Code zu erstellen. Dadurch können Stile gruppiert und der Schreibaufwand reduziert werden.

Stellen wir uns vor, wir müssen die Navigation einer Website erstellen.

Das HTML für diese Navigation sieht wie folgt aus:

<nav>
  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#price">Price</a>
    </li>
  </ul>
</nav>

Angenommen, dass wir neben der Navigation dieselben HTML-Tags (ul, li, a) mehrfach im gesamten Projekt verwenden. Um diesen Elementen gezielt Stile zuzuweisen, müssen wir Verschachtelungsregeln in CSS nutzen. Das CSS kann folgendermaßen aussehen:

nav {
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding-left: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: aquamarine;
}

nav ul li a:hover {
  text-decoration: underline wavy;
}

Nun sehen wir uns an, wie Sass unseren Arbeitsalltag erleichtert. Wir gruppieren alle diese Stile in einem Block. Der Code wird wie folgt umgeschrieben:

nav {
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 10px;

  ul {
    list-style: none;
    padding-left: 0;

    li {
      display: inline-block;
      margin: 0 10px;

      a {
        text-decoration: none;
        color: aquamarine;
        
        &:hover {
          text-decoration: underline wavy;
        }
      }
    }
  }
}

Es ist, als würden wir den Stilblock des Kindelements im Block des Elternelements verschachteln. Beachten Sie, dass das Symbol & im Selektor &:hover verwendet wird, um auf den übergeordneten Selektor zu verweisen, in diesem Fall a. Dies ist eine Kurzschreibweise für a:hover und erleichtert das Schreiben verschachtelter Selektoren, ohne den Elternelement-Selektor mehrfach wiederholen zu müssen.