Den neste kraftige funksjonen er nøsting. Dette gjør det mulig å nøste én selektor innenfor en annen for å skape mer organisert og lesbar kode. Vi kan gruppere stiler og redusere mengden kode som må skrives.

La oss tenke oss at vi må lage nettstedets navigasjon.

HTML-en for denne navigasjonen vil se slik ut:

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

Med tanke på at vi, i tillegg til navigasjonen, bruker de samme HTML-tagene (ul, li, a) flere ganger gjennom prosjektet. For å legge til noen stiler nøyaktig på disse elementene, må vi bruke nestede regler i CSS. CSS-en kan derfor se slik ut:

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

La oss nå se hvordan Sass kan gjøre arbeidet enklere. Vi samler alle disse stilene i én blokk. 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 er som om vi nestler barnets stilblokk i foreldrens blokk. Merk at symbolet & i &:hover-velgeren brukes for å referere til foreldervelgeren, i dette tilfellet a. Dette er en kortform for å skrive a:hover og gjør det enklere å skrive nestede velgere uten å måtte gjenta foreldervelgeren flere ganger.