La prochaine fonctionnalité puissante est l'imbrication. Elle nous permet d'imbriquer un sélecteur dans un autre pour créer un code plus organisé et lisible. Nous pouvons regrouper les styles et réduire le code que nous devons écrire.

Imaginons que nous devons créer la navigation du site web.

Le html pour cette navigation ressemblera à ce qui suit :

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

Étant donné qu'en plus de la navigation, nous utilisons les mêmes balises html (ul, li, a) plusieurs fois dans tout le projet. Pour ajouter des styles exactement à ces éléments, nous devons utiliser des règles d'imbrication en css. Donc, le css peut ressembler à ce qui suit :

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

Voyons maintenant comment Sass peut nous faciliter la vie. Nous allons regrouper tous ces styles en un seul bloc. Le code est réécrit en :

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

C'est comme si nous imbriquions le bloc de style de l'enfant dans son bloc parent. Notez que le symbole & dans le sélecteur &:hover est utilisé pour référencer le sélecteur parent, dans ce cas, a. C'est une façon abrégée d'écrire a:hover et cela facilite l'écriture de sélecteurs imbriqués sans répéter plusieurs fois le sélecteur parent.