Directive Sass - @each

La description

Dans @each , une variable est définie qui contient la valeur de chaque élément dans une liste.

Syntaxe

@each $var in <list or map>

La syntaxe est brièvement expliquée ci-dessous -

$var- Il représente le nom de la variable. @each ensembles de règles$var à chaque élément de la liste et génère les styles en utilisant la valeur de $var.
<list or map>- Ce sont des expressions SassScript, qui renverront une liste ou une carte .

Exemple

L'exemple suivant illustre l'utilisation de la directive @each -

<html>
   <head>
      <title>Control Directives & Expressions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <p class = "p_red">This is line one.</p>
      <p class = "p_green">This is line two.</p>
      <p class = "p_yellow">This is line three.</p>
      <p class = "p_blue">This is line four.</p>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

@each $color in red, green, yellow, blue {
   .p_#{$color} {
      background-color: #{$color};
   }
}

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\style.scss:style.css

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

style.css

.p_red {
   background-color: red; 
}

.p_green {
   background-color: green; 
}

.p_yellow {
   background-color: yellow; 
}

.p_blue {
   background-color: blue; 
}

Production

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

Enregistrez le code html ci-dessus dans le fichier @ each.html .
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

↰ Previous page