Extension Héritage

Syntaxe #

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !facultatif
• @extend .<className>, .<className> !facultatif

Paramètres #

La règle @extend de Sass vous permet de partager les propriétés CSS entre plusieurs classes, en gardant le code SEC et plus facile à lire.

Étendre une classe #

.message
  color: white

.message-important
  @extend .message
  background-color: red

Cela prendra tous les styles de .message et les ajoutera à .message-important. Il génère le CSS suivant :

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

Étendre à partir de plusieurs classes #

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

Dans le code ci-dessus, @extend est utilisé sur une ligne pour ajouter le code de plusieurs classes à .message-important, cependant, il est possible d’utiliser une extension par ligne comme ceci :

.message-important
    @extend .message
    @extend .important

L’une ou l’autre de ces méthodes générera le CSS suivant :

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

Chaînage des extensions #

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

Ce code provoque l’extension de .message-error à partir de .message-important, ce qui signifie qu’il contiendra le code de .message-important et de .message, puisque .method-important s’étend de .message. Cela se traduit par le CSS suivant :

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

** Avis de non-responsabilité : assurez-vous que la ou les classes à partir desquelles vous étendez n’apparaissent qu’une seule fois dans le code, sinon Sass risque de générer des CSS désordonnés et alambiqués. **

Extensions facultatives #

Parfois, vous voudrez peut-être qu’un @extend soit facultatif et ne nécessite pas que la classe spécifiée existe dans votre code.

.message-important
  @extend .message !optional
  background: red

Cela se traduira par le CSS suivant :

.message-important {
  background: red;
}

** Avis de non-responsabilité : ceci est utile pendant le développement lorsque vous n’avez peut-être pas encore écrit tout votre code et que vous ne voulez pas d’erreurs, mais il devrait probablement être supprimé en production car cela pourrait entraîner des résultats inattendus. **

Espaces réservés #

Parfois, vous créerez des classes qui ne seront pas utilisées en tant que telles, mais qui seront uniquement étendues à l’intérieur d’autres ensembles de règles. Cela signifie que le fichier CSS compilé sera plus volumineux que nécessaire. Les sélecteurs d’espace réservé résolvent ce problème.

Les sélecteurs d’espace réservé sont similaires aux sélecteurs de classe, mais ils utilisent le caractère de pourcentage (%) au lieu du (.) utilisé pour les classes. Ils n’apparaîtront pas dans le CSS compilé.

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

Cela compilera le CSS suivant :

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

Étendre le parent #

Typiquement essayer d’étendre le parent comme ceci:

.parent {
  style: value;

  @extend &;
}

Entraînera une erreur indiquant que le parent ne peut pas être étendu. Cela a du sens, mais il existe une solution de contournement. Stockez simplement le sélecteur parent dans une variable.

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

Il n’y a aucun avantage à faire cela dans l’exemple ci-dessus, mais cela vous donne le pouvoir d’envelopper les styles parents à partir d’un mixin inclus.