Sass - Attribution multiple @each avec des cartes

La description

L'affectation multiple fonctionne bien avec les cartes et elles sont considérées comme des listes de paires. Si vous souhaitez utiliser la carte, vous devez modifier l' instruction @each et utiliser plusieurs affectations.

Syntaxe

@each $var1, $var2 in <map>

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

$var1, $var2 - Ceux-ci représentent le nom des variables.
<map> - Il représente des listes de paires.

Exemple

L'exemple suivant illustre l'utilisation de plusieurs affectations avec des cartes -

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

   <body>
      <h1>Welcome to Tutorialspoint</p>
      <h2>Welcome to Tutorialspoint</p>
      <h3>Welcome to Tutorialspoint</p>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

@each $header, $color in (h1: red, h2: green, h3: blue) {
   #{$header} {
      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

h1 {
   color: red;
}

h2 {
   color: green; 
}

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

↰ Previous page