La prochaine fonctionnalité puissante est l’imbrication. Elle permet d’imbriquer un sélecteur dans un autre afin de créer un code plus organisé et lisible. Il est ainsi possible de regrouper les styles et de réduire la quantité de code à écrire.

Imaginons que nous devons créer la navigation d’un site web.

Le code HTML pour cette navigation sera le suivant :

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

En considérant qu'en dehors de la navigation, les mêmes balises HTML (ul, li, a) sont utilisées à plusieurs reprises dans le projet. Pour appliquer des styles précisément à ces éléments, il est nécessaire d'utiliser des règles imbriquées en CSS. Ainsi, le CSS peut ressembler à ceci :

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 simplifier la gestion de ces styles. Tous ces styles sont regroupés dans un seul bloc. Le code est réécrit ainsi :

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

Il s'agit d'imbriquer le bloc de style de l'enfant dans celui du parent. À noter que le symbole & dans le sélecteur &:hover sert à référencer le sélecteur parent, ici a. Il s'agit d'une écriture abrégée pour a:hover, ce qui facilite la rédaction de sélecteurs imbriqués sans répéter plusieurs fois le sélecteur parent.