Instruction @extend et héritage Sass

Instruction @extend Sass

Instruction @extend L'instruction permet de partager un ensemble de propriétés CSS d'un sélecteur à un autre sélecteur.

Si vous avez des éléments presque de même style, mais qui diffèrent uniquement sur des détails mineurs, alors Instruction @extend Les instructions sont très utiles.

L'exemple suivant en Sass crée d'abord un style de base pour le bouton (ce style sera utilisé pour la plupart des boutons). Ensuite, nous créons un style pour le bouton "Report" et un style pour le bouton "Submit". Les boutons "Report" et "Submit" sont tous deux via Instruction @extend Les instructions héritent de toutes les propriétés CSS de la classe .button-basic. De plus, elles définissent leurs propres couleurs :

Grammaire SCSS :

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Après compilation, le CSS sera comme suit :

Sortie CSS :

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

En utilisant Instruction @extend Vous n'avez pas besoin de spécifier plusieurs classes pour les éléments du code HTML, par exemple : <button class="button-basic button-report">Signaler cela</button>. Vous n'avez besoin que de spécifier .button-report pour obtenir deux ensembles de styles.

Instruction @extend Les instructions aident à maintenir votre code Sass très sec (DRY).