Sass - @each Multiple Assignment with Maps

Descripción

La asignación múltiple funciona bien con mapas y se consideran listas de pares. Si desea utilizar el mapa, debe cambiar @ cada declaración y utilizar varias asignaciones.

Sintaxis

@each $var1, $var2 in <map>

La sintaxis se explica brevemente a continuación:

$var1, $var2 - Representan el nombre de las variables.
<map> - Representa listas de pareja.

Ejemplo

El siguiente ejemplo demuestra el uso de asignaciones múltiples con mapas:

<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>

A continuación, cree el archivo style.scss .

style.scss

@each $header, $color in (h1: red, h2: green, h3: blue) {
   #{$header} {
      color: $color;
   }
}

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

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

A continuación, ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

h1 {
   color: red;
}

h2 {
   color: green; 
}

h3 {
   color: blue; 
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en el archivo @ each_multiple_map.html .
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page