A partir de su versión 3.3 Sass incorpora un nuevo tipo de dato: map, que permite crear y gestionar una lista o array clave/valor dentro de las hojas de estilo.
Veamos el funcionamiento con un ejemplo muy sencillo. Crearemos un map con los diferentes tonos de una escala de grises
$grayscale: map-merge( ( "100": #EEF1F4, "200": #DFE3E7, "300": #CBCFD2, "400": #B3B6B9, "500": #9CA0A3, "600": #7C7F82, "700": #606365, "800": #4A4C4F, "900": #333536, ), $grayscale );
Para poder acceder a alguno de los valores utilizaremos la función map-get:
p { color: map-get($grayscale, 400); }
Funciones para los Sass Maps
Sass proveé algunas funciones para utilizar Maps. Podremos crearlos, acceder a su contenido y manipularlos de una manera sencilla.
- map-get(map, key): Devuelve el valor de una clave dada.
- map-has-key(map, key): Comprueba si existe un clave determinada dentro del map.
- map-keys(map): Devuelve una lista con las claves del map.
- map-values(map): Devuelve una lista con los valores del map.
- map-merge(map1, map2): Permite fusionar maps.
- map-remove(map, keys...): Elimina elementos dentro del map..
Ejemplos reales
Vamos con unos ejemplos prácticos. Utilizaremos un map para incluir los diferentes puntos de interrupción de nuestro proyecto, después los llamaremos a través de un mixin. @content nos permitirá pasarle un bloque de código css al mixin:
$breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ); @mixin breakpoint($size) { @if map-has-key($breakpoints, $size) { @media (min-width: #{map-get($breakpoints, $size)}) { @content; } } } p{ @include breackpoint (xl){ font-size: 1.5rem; } }
Veamos otro ejemplo, crearemos una función que nos permita crear varias clases para añadir colores de fondo a los mensajes de nuestra web. En primer lugar crearemos nuestras variables de color y después se las añadiremos a un map:
$blue: #B5E6F5; $red: #FFB2AD; $yellow: #ADC9EA; $green: #D8F0D4; $colors: map-merge( ( “info: $blue, “danger”: $red, “warning”: $yellow, “success: $green, ), $colors );
Y ahora haremos una función que genere una clase para cada uno de los colores que tengamos en el map.
@each $name, $value in $colors { .bg-#{$name} { background-color: $value; } }
El resultado que obtendremos será:
.bg-info{ background-color: #B5E6F5; } .bg-danger{ background-color: #FFB2AD; } .bg-warning{ background-color: #ADC9EA; } .bg-success{ background-color: #D8F0D4; }
Podéis obtener más información en la documentación oficial: