Sass - @ cada directiva

Descripción

En @each , se define una variable que contiene el valor de cada elemento en una lista.

Sintaxis

@each $var in <list or map>

La sintaxis se explica brevemente a continuación:

$var- Representa el nombre de la variable. @each conjuntos de reglas$var a cada elemento de la lista y genera los estilos utilizando el valor de $var.
<list or map>- Estas son expresiones de SassScript, que devolverán una lista o un mapa .

Ejemplo

El siguiente ejemplo demuestra el uso de la directiva @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>

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

style.scss

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

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

.p_red {
   background-color: red; 
}

.p_green {
   background-color: green; 
}

.p_yellow {
   background-color: yellow; 
}

.p_blue {
   background-color: blue; 
}

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.html .
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page