Quels sont les inconvénients de l'utilisation de l'esperluette (&) dans les préprocesseurs?

• Détérioration de la lisibilité en cas d'imbrication profonde.
• Complexité de compréhension et de débogage du code avec de multiples contextes à l'intérieur des sélecteurs.
• Conflits potentiels lors du refactoring si l'on ne sait pas à quel sélecteur parent appartient l'esperluette.
• & peut entraîner une quantité excessive de styles pour un élément, rendant le CSS moins efficace.

Exemple :

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Contexte .parent .child--modifier
      // ...
      &-nested { // Contexte .parent .child--modifier-nested - devient moins clair
        color: red;
      }
    }
  }
}

Dans un autre exemple, on peut voir comment & peut masquer le sélecteur réel :

.btn {
  // ...
  &-primary { // Correspond à .btn-primary
    background-color: blue;
  }
}

Lors du refactoring, si l'on renomme .btn, il faut se rappeler de changer -primary. L'utilisation d'une classe séparée .btn-primary peut être plus claire et plus résistante aux changements.