Seuraava tehokas ominaisuus on sisäkkäisyys. Sen avulla voimme sijoittaa yhden valitsimen toisen sisään, mikä tekee koodista järjestelmällisempää ja helpommin luettavaa. Tyylejä voidaan ryhmitellä ja kirjoitettavan koodin määrä vähenee.

Kuvitellaan, että meidän täytyy luoda verkkosivuston navigaatio.

Tämän navigaation HTML näyttää seuraavalta:

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

Huomioiden, että käytämme samoja HTML-tageja (ul, li, a) useaan otteeseen projektissa navigaation lisäksi. Lisätäksemme tyylejä juuri näihin elementteihin, meidän tulee käyttää CSS:n sisäkkäisiä sääntöjä. CSS voi siis näyttää seuraavalta:

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

Seuraavaksi tarkastellaan, kuinka Sass voi helpottaa tyylien hallintaa. Ryhmittelemme kaikki nämä tyylit yhteen lohkoon. Koodi kirjoitetaan uudelleen seuraavasti:

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

Tässä sisäkkäiset tyylilohkot sijoitetaan vanhemman lohkon sisälle. Huomaa, että &-symbolia käytetään &:hover-valitsimessa viittaamaan vanhempaan valitsimeen, tässä tapauksessa a. Tämä on lyhyt tapa kirjoittaa a:hover ja helpottaa sisäkkäisten valitsimien kirjoittamista ilman, että vanhempaa valitsinta tarvitsee toistaa useaan kertaan.