Aller au contenu principal

Module SCSS.4 – Héritage & extends

Objectif​

Maîtriser l'héritage SCSS avec @extend et les placeholders pour créer du CSS optimisé et éviter la duplication.

Théorie​

@extend​

@extend = Hérite les styles d'un autre sélecteur.

Syntaxe :

.button {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.button-primary {
    @extend .button;
    background-color: blue;
    color: white;
}

.button-secondary {
    @extend .button;
    background-color: gray;
    color: white;
}

Compilé :

.button,
.button-primary,
.button-secondary {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.button-primary {
    background-color: blue;
    color: white;
}

.button-secondary {
    background-color: gray;
    color: white;
}

Avantage : CSS optimisé (regroupement des sélecteurs).

Placeholders (%)​

Placeholders = Sélecteurs qui ne sont pas compilés seuls, seulement si étendus.

Syntaxe :

%button-base {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.button-primary {
    @extend %button-base;
    background-color: blue;
}

.button-secondary {
    @extend %button-base;
    background-color: gray;
}

Compilé :

.button-primary,
.button-secondary {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.button-primary {
    background-color: blue;
}

.button-secondary {
    background-color: gray;
}

Différence avec classe :

  • Classe .button : Compilée même si non utilisée
  • Placeholder %button-base : Compilé seulement si étendu

@extend vs @include (mixin)​

@extend :

%base {
    padding: 10px;
}

.button {
    @extend %base;
}

Avantages :

  • ✅ CSS optimisé (regroupement)
  • ✅ Moins de code généré

Inconvénients :

  • ❌ Moins flexible (pas de paramètres)
  • ❌ Peut créer des sélecteurs complexes

@include (mixin) :

@mixin base {
    padding: 10px;
}

.button {
    @include base;
}

Avantages :

  • ✅ Flexible (paramètres)
  • ✅ Plus prévisible

Inconvénients :

  • ❌ Plus de code généré (duplication)

Quand utiliser quoi :

  • @extend : Styles communs sans paramètres
  • @include : Styles avec paramètres ou logique

Extend multiple​

Étendre plusieurs sélecteurs :

%base {
    padding: 10px;
}

%rounded {
    border-radius: 5px;
}

.button {
    @extend %base;
    @extend %rounded;
    background-color: blue;
}

Compilé :

.button {
    padding: 10px;
    border-radius: 5px;
    background-color: blue;
}

Extend avec nesting​

Extend dans un contexte :

%button-base {
    padding: 10px 20px;
}

.container {
    .button {
        @extend %button-base;
    }
}

⚠️ Attention : Extend peut créer des sélecteurs complexes.

Bonnes pratiques​

1. Utiliser placeholders pour styles de base​

✅ Bon :

%button-base {
    padding: 10px 20px;
    border-radius: 5px;
}

.button-primary {
    @extend %button-base;
}

2. Éviter extend de classes réelles​

❌ Mauvais :

.button {
    padding: 10px;
}

.other-button {
    @extend .button; // Peut créer des sélecteurs complexes
}

✅ Bon :

%button-base {
    padding: 10px;
}

.button {
    @extend %button-base;
}

.other-button {
    @extend %button-base;
}

3. Préférer mixins pour la flexibilité​

Quand utiliser mixins :

  • Besoin de paramètres
  • Logique conditionnelle
  • Styles variés

Quand utiliser extend :

  • Styles communs fixes
  • Optimisation CSS importante

Exercices guidés​

Exercice 1 : @extend de base​

Créez :

  • Une classe de base .card
  • Des variantes avec @extend
  • Observez le CSS compilé

Exercice 2 : Placeholders​

Créez :

  • Un placeholder %button-base
  • Plusieurs boutons qui l'étendent
  • Vérifiez que le placeholder n'est pas compilé seul

Exercice 3 : Extend vs Mixin​

Comparez :

  • Version avec @extend
  • Version avec @include
  • Comparez le CSS généré

Exercice 4 : Extend multiple​

Créez :

  • Plusieurs placeholders
  • Un composant qui étend plusieurs
  • Observez le résultat

Exercice 5 : Optimisation​

Refactorisez du code :

  • Identifiez les styles communs
  • Créez des placeholders
  • Utilisez @extend pour optimiser

❌ Erreurs fréquentes​

Erreur 1 : Extend de classes réelles​

❌ Mauvais :

.button {
    padding: 10px;
}

.other {
    @extend .button; // Peut créer des sélecteurs complexes
}

✅ Bon :

%button-base {
    padding: 10px;
}

.button {
    @extend %button-base;
}

.other {
    @extend %button-base;
}

Pourquoi : Placeholders = plus prévisible.

Erreur 2 : Confondre extend et include​

❌ Mauvais :

@mixin base {
    padding: 10px;
}

.button {
    @extend base; // Erreur : extend ne fonctionne pas avec mixin
}

✅ Bon :

@mixin base {
    padding: 10px;
}

.button {
    @include base;
}

Pourquoi : @extend pour sélecteurs, @include pour mixins.

Erreur 3 : Extend dans media query​

❌ Mauvais :

%base {
    padding: 10px;
}

@media (min-width: 768px) {
    .button {
        @extend %base; // Peut créer des problèmes
    }
}

✅ Bon :

%base {
    padding: 10px;
}

.button {
    @extend %base;
    
    @media (min-width: 768px) {
        padding: 15px;
    }
}

Pourquoi : Extend dans media query = sélecteurs complexes.

Erreur 4 : Oublier le % pour placeholder​

❌ Mauvais :

.button-base { // Classe normale
    padding: 10px;
}

✅ Bon :

%button-base { // Placeholder
    padding: 10px;
}

Pourquoi : Placeholder = pas compilé seul.

Erreur 5 : Trop d'extend​

❌ Mauvais :

// Extend partout, même quand mixin serait mieux

✅ Bon :

// Extend pour styles communs fixes
// Mixin pour flexibilité

Pourquoi : Choisir le bon outil selon le besoin.

🚀 Mini-projet​

Mission : Optimiser avec @extend et placeholders

Refactorisez un projet avec :

Placeholders :

  • %button-base pour styles communs
  • %card-base pour cartes
  • %form-input pour inputs

Extend :

  • Utilisez @extend pour créer des variantes
  • Optimisez le CSS généré
  • Comparez avant/après

Critères :

  • ✅ Placeholders bien utilisés
  • ✅ Extend approprié
  • ✅ CSS optimisé (moins de duplication)
  • ✅ Code maintenable

Objectif : Maîtriser l'héritage SCSS pour optimiser le CSS généré.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez @extend, placeholders et pouvez optimiser du CSS avec l'héritage.