Sass - @each Multiple Assignment

Descripción

También se pueden usar varios valores con @ cada directiva como$var1, $var2, $var3, ... en <list>.

Sintaxis

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

La sintaxis se explica brevemente a continuación:

$var1, $var2 y $var3 - Representan el nombre de las variables.
<list> - Representa lista de listas, cada variable contendrá el elemento de las sublistas.

Ejemplo

El siguiente ejemplo demuestra el uso de @each directiva con múltiples valores:

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

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

style.scss

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

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, usando 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

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

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

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

Salida

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

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

↰ Previous page