Qu'est-ce que la directive @extend dans SASS ?

SASS permet aux développeurs d'écrire du code plus lisible et de mieux l'exploiter. Il contient plusieurs directives telles que @media, @content, @include, @mixin, @extend, etc. qui fournissent des fonctionnalités permettant aux développeurs d'écrire un meilleur code que le CSS normal.

Dans ce tutoriel, nous découvrirons les @directives dans SASS. La directive @extend permet aux développeurs d'étendre le code CSS. Cependant, les mixins étendent également le code CSS et évitent la duplication. La directive @extend nous permet également d'éviter la duplication de code.

Par exemple, si les polices de votre application ont un CSS commun et qu'une taille de police différente est requise partout, vous pouvez étendre le style de police et ajouter une taille de police personnalisée. Cela élimine le besoin d’écrire du code en double.

De plus, les développeurs peuvent implémenter l'héritage en CSS à l'aide de la directive @extend, que nous apprendrons à travers des exemples.

Grammaire

Les utilisateurs peuvent utiliser la directive @extend dans SASS selon la syntaxe suivante.

selector {
   /* CSS code */
}
Another_CSS_selector {
   @extend selector;
   /* CSS code */
}

Dans la syntaxe ci-dessus, nous pouvons écrire du CSS commun dans le bloc de déclaration du "sélecteur". Après cela, nous pouvons étendre le sélecteur à l'intérieur de "Another_CSS_Selector" et ajouter notre propre code.

Exemple 1 (Utilisation de base de la directive @extend)

Dans l'exemple ci-dessous, nous avons défini quelques styles pour un élément HTML avec le nom de classe "card". Après cela, nous définissons le CSS pour les éléments "small_card" et "large_Card". Nous avons utilisé la directive @extend dans les deux sélecteurs pour étendre le CSS du sélecteur « card ». De plus, nous avons inclus du CSS supplémentaire comme la largeur, la hauteur, etc. dans les sélecteurs "small_card" et "large_card".

.card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   @extend .card;
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   @extend .card;
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

Sortie

Dans le résultat ci-dessous, nous pouvons observer que le style du sélecteur "card" est appliqué aux sélecteurs "small_card" et "large_card". Du CSS supplémentaire est également appliqué aux deux sélecteurs séparément.

.card,
.small_card,
.large_card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

Exemple 2 (chaîne d'héritage utilisant la directive @extend)

Dans l'exemple ci-dessous, nous montrons comment créer une chaîne d'héritage à l'aide de la directive @extend. Ici, nous avons ajouté du CSS dans le sélecteur « .first ». Après cela, nous avons étendu le sélecteur ".first" à l'intérieur du sélecteur ".second" et ajouté du CSS supplémentaire.

Ensuite, nous étendons le sélecteur « .second » à l'intérieur du sélecteur « .third » et le sélecteur « .third » à l'intérieur du sélecteur « .fourth ». Nous avons donc ici créé une chaîne d'héritage en utilisant différents sélecteurs CSS.

.first {
   width: 100px;
   height: auto;
}
.second {
   @extend .first;
   color: blue;
}
.third {
   @extend .second;
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   @extend .third;
   margin: 10px;
   padding: 1rem;
}

Sortie

Le résultat ci-dessous montre comment le code CSS est appliqué aux différents sélecteurs CSS lorsque nous créons une chaîne d'héritage à l'aide de la directive @extend.

.first,
.second,
.third,
.fourth {
   width: 100px;
   height: auto;
}
.second,
.third,
.fourth {
   color: blue;
}
.third,
.fourth {
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   margin: 10px;
   padding: 1rem;
}

Exemple 3 (héritage multiple utilisant la directive @extend)

Dans cet exemple, nous montrons comment utiliser l'héritage multiple à l'aide de la directive @extend. L'héritage multiple signifie qu'un seul sélecteur étend plusieurs sélecteurs.

Ici, nous avons défini les sélecteurs CSS « ​​.container » et « .main » et ajouté du CSS. Après cela, à l'intérieur du sélecteur CSS ".element", nous étendons les sélecteurs ".container" et ".main".

.container {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main{
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   @extend .main;
   @extend .container;
   padding: 2%;
}

Sortie

.container,
.element {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main,
.element {
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   padding: 2%;
}

Exemple 4 (utilisation de la directive @extend dans la directive @media)

Dans l'exemple ci-dessous, nous utilisons la directive @extend à l'intérieur de la directive @media. Cependant, le compilateur SASS génère une erreur chaque fois que nous étendons un sélecteur CSS défini en dehors de la directive @media dans le sélecteur de la directive @media.

Ici, nous avons étendu le sélecteur CSS « ​​.small_button » avec le sélecteur CSS « ​​.button » dans la directive @media. Les utilisateurs peuvent constater que les deux sélecteurs sont situés ici dans la directive @media.

@media small_screen {
   .button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      @extend .button;
      @extend .main;
      height: 25%;
   }
}

Sortie

@media small_screen {
   .button,
   .small_button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      height: 25%;
   }
}

Exemple 5 (Sélecteur d'espace réservé)

Comme son nom l'indique, nous pouvons créer un sélecteur d'espace réservé en ajoutant le symbole (%) avant le nom du sélecteur. Lorsque nous compilons le code SASS, le sélecteur d'espace réservé n'apparaîtra pas dans le code de sortie, mais son style sera ajouté à la place de l'expansion.

Par exemple, nous définissons ici le sélecteur d'espace réservé « %container ». Après cela, nous avons étendu les sélecteurs de conteneurs à l'intérieur de "small_container" et "medium_container".

Dans la sortie, nous pouvons observer qu'il ne contient pas le sélecteur "container", mais "small_container" et "large_container" contiennent le code d'espace réservé "container".

%container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   @extend %container;
   width: 100px;
   height: 100px;
}
.medium_container {
   @extend %container;
   width: 300px;
   height: 300px;
}

Sortie

.small_container,
.medium_container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   width: 100px;
   height: 100px;
}
.medium_container {
   width: 300px;
   height: 300px;
}

Les utilisateurs ont appris à utiliser la directive @extend dans ce tutoriel. Fondamentalement, nous pouvons l'utiliser pour étendre les feuilles de style et éviter la duplication de code. De plus, nous pouvons créer des chaînes d'héritage en CSS à l'aide de la directive @extend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!