Comprendre la directive @extend en Sass

La directive @extend en Sass (Syntactically Awesome Stylesheets) est un outil puissant pour partager les règles et les relations entre les sélecteurs. Elle aide essentiellement à hériter les styles d'un sélecteur à un autre. C'est cette fonctionnalité qui est la plus adaptée pour répondre à la question.

En utilisant @extend, vous pouvez dire à un sélecteur de prendre toutes les règles CSS d'un autre sélecteur

Exemple Pratique de @extend

Voici un exemple simple pour illustrer comment cela fonctionne.

.btn {
  padding: 10px;
  border-radius: 5px;
  color: white;
}

.btn-primary {
  @extend .btn;
  background: blue;
}

.btn-danger {
  @extend .btn;
  background: red;
}

Dans cet exemple, .btn-primary et .btn-danger hériteront tous deux les styles de padding, border-radius et color de .btn grâce à la directive @extend. Le résultat CSS sera comme suit :

.btn, .btn-primary, .btn-danger {
  padding: 10px;
  border-radius: 5px;
  color: white;
}

.btn-primary {
  background: blue;
}

.btn-danger {
  background: red;
}

Meilleures Pratiques

Bien que @extend soit très puissant, il est important de noter certaines pratiques recommandées pour son utilisation.

• Évitez d'étendre les classes qui ont beaucoup de règles. Cela peut conduire à des feuilles de style inutilement volumineuses.
• N'utilisez pas @extend à l'intérieur des médias queries. Sass ne permet pas actuellement d'étendre les styles à l'intérieur des requêtes @media, ce qui peut conduire à des résultats inattendus.
• Utilisez @extend avec le % placeholder pour éviter la duplication inutile de code. Les placeholders sont des sélecteurs qui ne sont pas rendus dans le CSS final à moins qu'ils ne soient étendus.

En conclusion, @extend est un outil essentiel pour partager les styles à travers plusieurs sélecteurs en Sass, permettant une organisation et une efficacité accrues dans votre code.