Nästa kraftfulla funktion är nästling. Det gör det möjligt att nästla en selektor inom en annan för att skapa mer organiserad och lättläst kod. Vi kan gruppera stilar och minska mängden kod vi behöver skriva.

Föreställ dig att vi behöver skapa webbplatsens navigering.

HTML-koden för denna navigering kommer att se ut så här:

<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å att vi, förutom i navigeringen, använder samma HTML-taggar (ul, li, a) flera gånger i projektet. För att lägga till specifika stilar för just dessa element behöver vi använda nästlade regler i CSS. CSS kan därför se ut så här:

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 ska vi se hur Sass kan förenkla vårt arbete. Vi grupperar alla dessa stilar i ett block. Koden skrivs om till:

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 är som att vi nästlar barnets stilblock i dess förälder. Observera att symbolen & i selektorn &:hover används för att referera till föräldraselektorn, i detta fall a. Detta är en förkortning för att skriva a:hover och gör det enklare att skriva nästlade selektorer utan att behöva upprepa föräldraselektorn flera gånger.