⊗mkLsBsMVEaD 41 of 42 menu

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.

Español
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Usamos cookies para el funcionamiento del sitio, análisis y personalización. El procesamiento de datos se realiza de acuerdo con la Política de privacidad.
aceptar todas configurar rechazar