sass
Étendre / Hériter

Syntaxe

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

Paramètres

Remarques

É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 de plusieurs classes

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

Dans le code ci-dessus, @extend est utilisé dans 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ère les CSS suivantes:

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

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

Chaînage Étend

.message
  color: white
  background: black

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

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

Ce code provoque l' .message-error à partir de .message-important , ce qui signifie qu'il contiendra du code provenant de .message-important et .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;
}

Clause de non-responsabilité: Assurez-vous que la ou les classes que vous utilisez ne se produisent qu'une fois dans le code, sinon Sass peut générer des CSS désordonnés et compliqués.

Extensions facultatives

Parfois, vous pouvez souhaiter 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;
}

Déni de responsabilité: Ceci est utile pendant le développement lorsque vous n'avez pas encore tout votre code écrit 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.

Placeholders

Parfois, vous créerez des classes qui ne seront pas utilisées à part entière, mais uniquement à l'intérieur d'autres jeux de règles. Cela signifie que le fichier CSS compilé sera plus volumineux que nécessaire. Les sélecteurs d'espaces réservés résolvent ce problème.

Les sélecteurs d'espaces réservés 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 vers 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;
}

Extension du parent

Essayant généralement d'étendre le parent comme ça:

.parent {
  style: value;

  @extend &;
}

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

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

Cela ne sert à rien de le faire dans l'exemple ci-dessus, mais cela vous permet d'envelopper les styles parents à partir d'un mixin inclus.