Den næste kraftfulde funktion er indlejring. Det gør det muligt at indlejre én selektor i en anden for at skabe mere organiseret og læsbar kode. Vi kan gruppere stilarter og reducere mængden af kode, der skal skrives.

Forestil dig, at vi skal oprette navigationen til hjemmesiden.

HTML-strukturen for denne navigation vil se således ud:

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

Bemærk, at udover navigationen anvender vi de samme HTML-tags (ul, li, a) flere steder i projektet. For at tilføje specifikke stilarter til netop disse elementer, skal vi bruge nestede regler i CSS. CSS kan derfor se således ud:

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 kan vi se, hvordan Sass kan gøre arbejdet lettere. Vi samler alle disse stilarter i én blok. Koden omskrives til:

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

Det svarer til at nestede et barns stilblok i dets forælderblok. Bemærk, at &-symbolet i &:hover-vælgeren bruges til at referere til forældervælgeren, i dette tilfælde a. Dette er en forkortet måde at skrive a:hover på og gør det lettere at skrive nestede vælgere uden at gentage forældervælgeren flere gange.