De volgende krachtige functie is nesten. Hiermee kunnen we een selector binnen een andere plaatsen om meer georganiseerde en leesbare code te creëren. We kunnen stijlen groeperen en de hoeveelheid code die we moeten schrijven verminderen.

Stel je voor dat we de navigatie van de website moeten maken.

De html voor deze navigatie ziet er als volgt uit:

<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>

Aangezien we naast de navigatie dezelfde html-tags (ul, li, a) meerdere keren in het project gebruiken, is het noodzakelijk om geneste regels in css toe te passen om specifieke stijlen aan deze elementen toe te voegen. De css kan er als volgt uitzien:

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;
}

Nu bekijken we hoe sass het werken eenvoudiger maakt. Alle stijlen worden gegroepeerd in één blok. De code wordt herschreven naar:

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;
        }
      }
    }
  }
}

Het is alsof de stijl van het kindelement wordt genest binnen het blok van het ouderelement. Let op dat het &-symbool in de selector &:hover wordt gebruikt om naar de ouderselector te verwijzen, in dit geval a. Dit is een verkorte manier om a:hover te schrijven en maakt het eenvoudiger om geneste selectors te schrijven zonder de ouderselector meerdere keren te herhalen.