📚 Cours SCSS (Sass) 📍 Chapitre 13 / 21

Héritage et @extend

L'instruction @extend permet de partager des styles entre sélecteurs en utilisant le principe d'héritage. Bien utilisée, elle peut réduire la taille du CSS final. Mal utilisée, elle peut rendre le CSS difficile à lire et à maintenir. Ce chapitre t'apprend à comprendre précisément son fonctionnement et à l'utiliser avec discernement.

Objectifs du chapitre

  • Comprendre le principe de l'héritage avec @extend.
  • Savoir comment SCSS fusionne les sélecteurs dans le CSS final.
  • Comparer @extend et les mixins (vues au chapitre 8).
  • Identifier les cas d'usage pertinents et les pièges à éviter.
À retenir

@extend ne copie pas des styles : il fusionne des sélecteurs. C'est ce point qui le rend à la fois puissant… et risqué.

Explications théoriques détaillées

Principe de base de @extend

Avec @extend, un sélecteur "hérite" des règles d'un autre sélecteur. SCSS va alors regrouper les sélecteurs dans le CSS généré.

SCSS :

SCSS
.button {
  padding: 10px 16px;
  border-radius: 12px;
}

.button--primary {
  @extend .button;
  background: #7aa7ff;
}

CSS généré :

CSS
.button,
.button--primary {
  padding: 10px 16px;
  border-radius: 12px;
}

.button--primary {
  background: #7aa7ff;
}

Différence fondamentale avec une mixin

  • Mixin : copie les styles à chaque utilisation.
  • @extend : fusionne les sélecteurs partageant les mêmes styles.
À retenir

Mixins = duplication contrôlée.
@extend = mutualisation structurelle des sélecteurs.

Exemples simples

Héritage simple entre composants

SCSS :

SCSS
.card {
  padding: 16px;
  border-radius: 12px;
  background: white;
}

.card--highlight {
  @extend .card;
  border: 2px solid #7aa7ff;
}

Ici, .card--highlight partage exactement la même base que .card.

Utilisation de placeholders (%)

Les placeholders sont des sélecteurs "fantômes" qui n'apparaissent jamais dans le CSS final s'ils ne sont pas étendus.

SCSS :

SCSS
%box {
  padding: 16px;
  border-radius: 12px;
}

.card {
  @extend %box;
}

.alert {
  @extend %box;
}

CSS généré :

CSS
.card,
.alert {
  padding: 16px;
  border-radius: 12px;
}
À retenir

Les placeholders sont la forme la plus sûre de @extend.

Exemples concrets et professionnels

Cas pro 1 : états partagés (hover, focus)

SCSS :

SCSS
%interactive {
  transition: background .2s ease;

  &:hover {
    filter: brightness(1.05);
  }
}

.btn {
  @extend %interactive;
  background: #7aa7ff;
}

.link {
  @extend %interactive;
  color: #7aa7ff;
}

Les états interactifs sont centralisés et cohérents. Cela permet une expérience utilisateur uniforme.

Cas pro 2 : pourquoi éviter @extend sur des sélecteurs complexes

Étendre un sélecteur imbriqué peut produire un CSS très difficile à lire et à maintenir.

SCSS :

SCSS
.nav ul li a {
  color: red;
}

.footer-link {
  @extend .nav ul li a;
}

CSS généré (simplifié) :

CSS
.nav ul li a,
.footer-link {
  color: red;
}
Conseil terrain

Évite d'étendre des sélecteurs trop spécifiques. Préfère les placeholders ou les mixins pour une meilleure maintenabilité.

Bonnes pratiques

  • Privilégier les placeholders (%) plutôt que les classes concrètes.
  • Limiter @extend à des styles structurels simples (padding, margin, radius).
  • Éviter @extend sur des sélecteurs imbriqués ou très spécifiques.
  • Relire le CSS généré pour comprendre l'impact réel sur la sortie.
  • Préférer les mixins pour les styles conditionnels ou paramétrables.
À retenir

@extend est puissant mais délicat : utilise-le rarement, mais consciemment. Quand tu doutes, une mixin est souvent une alternative plus sûre.

Erreurs courantes

Erreur 1 : utiliser @extend comme une mixin

@extend n'est pas un copier-coller. Son effet sur le CSS final est global. Si tu as besoin de styles paramétrables ou conditionnels, utilise une mixin.

Erreur 2 : étendre des classes externes (frameworks)

Étendre une classe Bootstrap, Tailwind ou autre peut produire des effets imprévisibles sur tout le CSS. Tu perds le contrôle sur la spécificité et l'ordre des règles.

Erreur 3 : oublier de lire le CSS généré

Sans analyse du CSS final, il est très facile de créer des sélecteurs "monstrueux" qui rendent le CSS difficile à déboguer et à maintenir.

Résumé du chapitre

Ce que vous avez appris
✓
@extend permet de partager des styles via l'héritage en fusionnant des sélecteurs.
✓
Les placeholders (%nom) sont la meilleure pratique pour utiliser @extend.
✓
Il faut distinguer @extend (fusion de sélecteurs) des mixins (copie de styles).
✓
Mal utilisé, @extend peut rendre le CSS difficile à lire et à maintenir.

Prochain chapitre : Gestion avancée des couleurs avec SCSS

Dans le prochain chapitre, nous verrons la gestion avancée des couleurs avec SCSS, en exploitant les fonctions natives et les maps pour créer des palettes cohérentes et évolutives.

  • Fonctions natives de manipulation des couleurs (darken, lighten, mix, etc.)
  • Création de palettes de couleurs dynamiques avec des maps
  • Accessibilité et contrastes avec SCSS
  • Thèmes sombre/clair avec variables SCSS
← Chapitre 12 : Maps SCSS Chapitre 14 : Gestion avancée des couleurs avec SCSS →