En este tutorial aprenderemos a utilizar el tipo de dato Map en Sass

En los últimos días hemos estado hablando acerca de los Preprocesadores y profundizando en Sass, su instalación, características y operadores mixin y extend. Esta semana continuamos con los tutoriales enfocándonos en el tipo de dato map.

Este es un tipo de dato agregado en la versión 3.3 de Sass, se trata de una lista que contiene en su interior serie de llaves y valores, asociados entre sí. Podemos acceder a estos valores a través de sus llaves.

Declaramos una variable map de la siguiente manera.

$map: (keyA: valueA, keyB: valueB);

Se antepone el signo de dólar, seguido del nombre de la variable; luego, entre paréntesis tenemos las llaves y los valores.

Es importante saber que las llaves que se encuentran dentro de la variable map, deben de ser únicas; es decir, no deben repetirse. 

En Sass contamos con una serie de funciones que nos ayudan a poder trabajar con las variables map, una de ellas es 

map-get($map, $key)

Que nos devolverá el valor asociado a la $key que declaremos, para entenderlo mejor, vamos a ver el siguiente ejemplo.

En el ejemplo, con la función map-get() estamos llamando a los valores que tenemos almacenados en nuestra variable $estilos.

Pasemos ahora a ver la función merge, la cual podemos declarar de la siguiente manera.

map-merge($map1, $map2)

Lo que vamos a hacer aquí es unir las dos variables map, para tener una que tenga las llaves de ambas.

En el ejemplo creamos la variable $merged para almacenar el resultado de map-merge($estilos_uno, $estilos_dos) luego llamamos a los valores que tiene $merged, a través de sus llaves azul, centro y blanco.

En la función remove eliminaremos un valor asociado a una llave, luego este devolverá un nuevo map con el valor eliminado. Lo declaramos de la siguiente manera.

map-remove($map, $key)

En el ejemplo, tendremos un map con la llave white y el valor de #FFFFFF, el cual vamos a eliminar y el nuevo map que nos queda lo almacenaremos en la variable $return.

Vamos a ver ahora la función map-has-key Devuelve verdadero, si el $map tiene un valor asociado con una $key determinada, la función la vamos a declarar de la siguiente manera.

map-has-key($map, $key)

En el siguiente vamos a crear un mixin y usaremos un if para usar esta función, por el mixin le vamos a pasar una variable $color, la cual pasará a ser evaluada con map-has-key para saber si la $key existe en el $map y tiene un valor asociado. De ser así extraemos el valor con map-get y lo asignamos a un background-color.

Luego tenemos las funciones map-key y map-values, la primera nos devolverá una lista de todas las claves de un $map y la segunda una lista de todos los valores de un $map.

Podemos declarar las funciones de la siguiente manera:

map-keys($map)

map-values($map)

Para interiorizar lo aprendido, la práctica es importante, así que crea un nuevo proyecto y comienza a practicar. Recuerda que en Devcode tenemos una amplia variedad de cursos que complementarán tu aprendizaje. Puedes acceder a ellos tras registrarte en la plataforma. No olvides compartir el tutorial con tus amigos y si tuvieras algún comentario, duda o sugerencia, puedes dejarla siempre en la caja de comentarios.