Sass - Affectation multiple @each

La description

Plusieurs valeurs peuvent également être utilisées avec la directive @each comme$var1, $var2, $var3, ... dans <list>.

Syntaxe

@each $var1, $var2, $var3 ... in <list>

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

$var1, $var2 et $var3 - Ceux-ci représentent le nom des variables.
<list> - Il représente une liste de listes, chaque variable contiendra l'élément des sous-listes.

Exemple

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

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

   <body>
      <p class = "aqua">This is line one.</p>
      <p class = "red">This is line two.</p>
      <p class = "green">This is line three.</p>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

@each $color, $border in (aqua, dotted), (red, solid), (green, double){
   .#{$color} {
      background-color : $color;
      border: $border;
   }
}

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

.aqua {
   background-color: aqua;
   border: dotted;
}

.red {
   background-color: red;
   border: solid; 
}

.green {
   background-color: green;
   border: double;
}

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_multiple.html .
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

↰ Previous page