Sass - Étendre les directives

La description

La directive @extend est utilisée pour partager des règles et des relations entre les sélecteurs. Il peut étendre tous les autres styles de classe dans une classe et peut également appliquer ses propres styles spécifiques. Voici les types d'extension -

Types et description Syntaxe Code compilé

Extending Complex Selectors

Il peut étendre le sélecteur qui ne consiste qu'en un seul élément ou sélecteur de classe.

 
h2 {
   font-size: 40px;
}

.container{
   @extend h2
}
 
h2, .container {
   font-size: 40px;
}

Multiple Extends

Plus d'un sélecteur peut être étendu par un seul sélecteur.

 
.style {
   font-size: 25px;
   font-style: italic;
}

h2 {
   color: #61C8E1;
}

.container {
   @extend .style;
   @extend h2
}
 
.style, .container {
   font-size: 25px;
   font-style: italic;
}

h2, .container {
   color: #61C8E1;
}

Chaining Extends

Le premier sélecteur étendu par le deuxième sélecteur et le deuxième sélecteur est prolongé par le troisième sélecteur, c'est pourquoi cela est connu comme le chaînage s'étend.

 
.style {
   font-size: 25px;
   font-style: italic;
}

h2 {
   color: #61C8E1;
   @extend .style
}

.container {
   @extend h2
}
 
.style, h2, .container {
   font-size: 25px;
   font-style: italic;
}

h2, .container {
   color: #61C8E1;
}

Selector Sequences

Le sélecteur imbriqué peut utiliser @extend par lui-même.

Merging Selector Sequences

Il fusionne deux séquences, c'est-à-dire qu'une séquence étend une autre séquence qui est présente dans une autre séquence.

 
.style {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

h2 .container {
   @extend .style
}
.container .style a {
   font-weight: bold;
}

#id .example {
   @extend a;
}
 
.style, h2 .container {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}
.container .style a, .container .style #id
.example, #id .container .style .example {
   font-weight: bold;
}

@extend - Only Selectors

Le caractère de pourcentage (%) peut être utilisé n'importe où dans un identifiant ou une classe, il empêche son propre jeu de règles d'être rendu en CSS.

 
.style a%extreme {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

.container {
   @extend %extreme;
}
 
.style a.container {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

The !optional Flag

L'indicateur! Optionnel est utilisé pour permettre à @extend de ne pas créer de nouveau sélecteur.

 
h2.important {
   @extend .style !optional;
}
 
A blank compile page gets display.

@extend in Directives

Si @extend est utilisé dans le @media, il ne peut étendre que les sélecteurs présents dans les mêmes blocs de directive.

 
@media print {
   .style {
      font-size: 25px;
      font-style: italic;
   }
   
   .container {
      @extend .style;
      color: #61C8E1;
   }
}
 
@media print {
   .style, .container {
      font-size: 25px;
      font-style: italic;
   }

   .container {
      color: #61C8E1;
   }
}

Exemple

L'exemple suivant illustre l'utilisation de @extend dans le fichier SCSS -

extend.htm

<!doctype html>
   <head>
      <title>Extend Example</title>
      <link rel = "stylesheet" href = "extend.css" type = "text/css" />
   </head>

   <body class = "container">
      <h2>Example using Extend</h2>
      <p class = "style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </body>
</html>

Ensuite, créez le fichier extend.scss .

extend.scss

.style{
   font-size: 30px;
   font-style: italic;
}

h2{
   color: #787878;
   @extend .style

}

.container{
   @extend h2
}

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\extend.scss:extend.css

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier extend.css avec le code suivant -

extend.css

.style, h2, .container {
   font-size: 30px;
   font-style: italic;
}

h2, .container {
   color: #787878;
}

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus dans extend.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.