Valores múltiples en la directiva @each en SASS
La directiva @each se puede
aplicar para crear
listas de estilos más complejas.
Para esto, escribimos varias
variables, y en la lista de elementos
agregamos valores adicionales.
Consideremos el siguiente ejemplo:
@each $picture, $color, $padding in
(winter, blue, 10px),
(spring, green, 12px),
(summer, yellow, 14px),
(autumn, brown, 16px) {
img.#{$picture} {
background-image: url('/images/#{$picture}.png');
border: 4px solid $color;
padding: $padding ;
}
}
Resultado de la compilación:
img .winter {
background-image: url("/images/winter.png");
border: 4px solid blue;
padding: 10px;
}
img .spring {
background-image: url("/images/spring.png");
border: 4px solid green;
padding: 12px;
}
img .summer {
background-image: url("/images/summer.png");
border: 4px solid yellow;
padding: 14px;
}
img .autumn {
background-image: url("/images/autumn.png");
border: 4px solid brown;
padding: 16px;
}
También, usando la asignación múltiple se pueden agregar pares de valores a la lista:
@each $elem, $font-size in (div: 14px, p: 12px) {
#{elem} {
font-size: $font-size;
}
}
Ahora veamos el resultado obtenido:
div {
font-size: 14px;
}
p {
font-size: 12px;
}
Explica, cuál será el resultado de la compilación del siguiente código:
@each $elem, $size, $color in
(navbar: 14px blue, link: 12px red, span: 10px green) {
#{$elem} {
font-size: $size;
color: $color;
}
}
Modifica las condiciones de la tarea anterior, para que los elementos
navbar, link y span tengan
subrayado inferior, punteado y ondulado
respectivamente.