La prossima funzionalità potente è il nesting. Consente di annidare un selettore all'interno di un altro per creare codice più organizzato e leggibile. Possiamo raggruppare gli stili e ridurre la quantità di codice da scrivere.

Immaginiamo di dover creare la navigazione di un sito web.

L'html per questa navigazione sarà il seguente:

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

Considerando che, oltre alla navigazione, utilizziamo gli stessi tag html (ul, li, a) più volte all'interno del progetto. Per applicare degli stili esattamente a questi elementi, è necessario utilizzare le regole di annidamento in css. Quindi, il css può essere il seguente:

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

Ora, vediamo come sass può semplificare il lavoro. Tutti questi stili vengono raggruppati in un unico blocco. Il codice viene riscritto così:

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

È come se si annidasse il blocco di stile del figlio all'interno di quello del genitore. Prestare attenzione al fatto che il simbolo & nel selettore &:hover viene utilizzato per fare riferimento al selettore genitore, in questo caso, a. Questa è una forma abbreviata per scrivere a:hover e rende più semplice scrivere selettori annidati senza ripetere più volte il selettore genitore.