Cómo utilizar Sass Map en nuestros proyectos

sass_header.jpg
Solucionex
16
Abr 21

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: