Una Introducción a los Mapas Sass: Uso y Ejemplos

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Para los frot-ends escalables, los mapas Sass son una bendición. Extraer la configuración de la lógica de un módulo es un gran método para estructurar. Permítame explicarle por qué creo que los Mapas Sass son la mejor característica de Sass 3.3.

Sass 3.3

Sass 3.3 ha estado al alcance de todos durante un tiempo, pero muchas de sus características del mundo real todavía no son familiares para muchos desarrolladores. La nueva versión de Sass nos trajo un nuevo tipo de datos llamado map. Los mapas contienen una colección de pares clave/valor y nos ayudan a crear pequeñas áreas de configuración para una base de código simplificada.

Cómo Utilizar los Mapas Sass

Para estar de acuerdo cubriremos los fundamentos de usar mapas Sass, después más adelante veremos algunos casos de uso.

Generación de un Mapa

He aquí una rápida descripción de la sintaxis de un mapa sassy. Comience con un nombre de variable ($map en este caso) y luego ingrese algunas claves con valores, separadas por comas, todas dentro de paréntesis:

1	$map: (
2	key: value,
3	nextkey: nextvalue
4	);

Cómo Obtener un Valor

Habiendo almacenado múltiples pares clave/valor en algún momento necesitará recuperar esa información. Si necesita encontrar el valor de una clave, utilice la función map-get(). Vamos a pasarle dos parámetros: el nombre del mapa y luego la clave.

1	.element:before {
2	content: map-get($map, key);
3	}

Una vez compilado el resultado será el siguiente:

1	.element:before {
2	content: value;
3	}

Cómo Comprobar si hay una Llave Disponible

Es muy recomendable que utilice una sólida gestión de errores en el proceso de desarrollo de Sass. Para esto Sass nos da la función map-has-key(). Esta función de ayuda mira si existe una clave, y si no entrega otra salida para advertir al desarrollador.

Eche un vistazo a esta Introducción a la Gestión de Errores en Sass de Hugo Giraudel para una manera impresionante de manejar errores.

$map: (
    key: value,
    nextkey: nextvalue
);

.element {
  @if map-has-key($map, key) {
    content: ’Map has this key.’;
  } @else {
    content: ’Map has not this key.’;
  }
}

Resultado:

1	.element {
2	content: ’Map has this key.’;
3	}

Cómo Fusionar Mapas

Tiempo de bonificación: Sass nos permite fusionar dos o más mapas. Usted está comprendiendo esto ahora, así que eche un vistazo a este ejemplo de cómo utilizar la función map-merge():

$colors: (
  light: #ccc,
  dark: #000
);

$brand-colors: (
  main: red,
  alternative: blue
);

// Merge maps
$merged: map-merge($colors, $brand-colors);

.element {
  content: map-get($merged, alternative);
}

El resultado:

1	.element {
2	content: blue;
3	}

Casos de Uso en el Mundo Real

Hemos cubierto el cómo, ahora veamos el dónde.

1. Cómo Recorrer un Mapa y Generar Clases

Los mapas también pueden ser útiles sin las funciones que los acompañan. Por ejemplo, puede realizar un bucle a través de su mapa, definir los parámetros con los valores que espera y a continuación, agregar el nombre del mapa Sass. Al hacer esto es posible trabajar con diferentes tipos de valores.

En este ejemplo, estoy imprimiendo clases para mostrar los íconos. Puse el nombre del ícono como la clave, dejando el valor para almacenar el content real (que luego añadiríamos a través de pseudo elementos).

Nota: En un escenario del mundo real, primero declararíamos algunos estilos básicos, pero eso está más allá del alcance de este tutorial.

/* Define the Sassy Map called $icons */
$icons: (
  checkmark: a,
  plus: b,
  minus: c
);

/* For each key in the map, created an own class */
@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;
  }
}

La salida habla por sí misma:

/* For each key in the map, created an own class */
.icon--checkmark {
  content: "a";
}

.icon--plus {
  content: "b";
}

.icon--minus {
  content: "c";
}

Esta es una manera realmente eficiente de cargar clases para los íconos. Hay muchos más casos de uso también–veamos algunos.

2. Múltiples Valores para Añadir Fantasía

Siguiendo, es posible dar a una clave más de un valor. Esto se hace usando recortes e ingresando varios valores con un separador de coma. Esto, por ejemplo, podría ser genial para transferir estilos para variantes de un módulo.

Aquí voy a diseñar una serie de botones. El primer valor para cada clave es para el background-color y el segundo para el font-color.

Luego hago un bucle a través de las claves con el objeto esperado $colors. Obtengo el valor de la primera clave en este objeto con nth($colors, 1) (comienzo con el nombre del objeto y luego la posición del valor buscado). Si necesita el segundo valor, entonces ingrese 2.

// _m-buttons.scss
$buttons: (
  error: (#d82d2d, #666),
  success: (#52bf4a, #fff),
  warning: (#c23435, #fff)
);

.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
  
  @each $name, $colors in $buttons {
    $bgcolor: nth($colors, 1);
    $fontcolor: nth($colors, 2);
    
    &--#{$name} {
      background-color: $bgcolor;
      color: $fontcolor;
    }  
  }
}

La salida:

.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
}

.m-button--error {
  background-color: #d82d2d;
  color: #666;
}

.m-button--success {
  background-color: #52bf4a;
  color: #fff;
}

.m-button--warning {
  background-color: #c23435;
  color: #fff;
}

3. Manejo de Capas (z-index)

No conozco a un desarrollador de front-end que no haya luchado con z-index en algún momento. Los problemas suelen surgir de perder una visión general si necesita utilizar z-index en varios lugares en un proyecto. Los mapas Sass pueden ayudarnos.

Comencemos con $layer como el mapa. Las claves deben ser nombradas lógicamente de modo que usted sepa qué valor está para qué elemento - quizá offcanvas, lightbox, dropdown etc.

// _config.scss
$layer: (
  offcanvas: 1,
  lightbox: 500,
  dropdown: 10,
  tooltip: 15
);

// _m-lightboxes.scss
@function layer($name) {
  @if map-has-key($layer, $name) {
    @return map-get($layer, $name);  
  }
  
  @warn "The key #{$name} is not in the map ’$layer’";
  @return null;
};

.m-lightbox {
  z-index: layer(lightbox);
}

Aquí escribí una función para obtener el valor de una clave específica, pero ¿por qué hice eso? La respuesta es afortunadamente sencilla: es más rápido que escribir map-get() cada vez. Otro aspecto positivo es que puede crear un error de manejo y dar al desarrollador un poco de retroalimentación en cuanto a por qué no pasa nada.

Esta es la salida:

1	.m-lightbox {
2	z-index: 500;
3	}

4. Uso de Estilos Base para Fuentes en un Proyecto

Cada proyecto tiene su propio archivo de configuración; conceptos básicos para el uso global. Por ejemplo, en mis proyectos, defino algunos valores para las propiedades de fuente: color de fuente, color de fuente alternativo, familia de fuente o tamaño de fuente. Solía crear una variable para cada propiedad, pero un mapa sería mejor.

He aquí un ejemplo rápido, para comenzar con la vieja solución:

1	$base-font-color: #666;
2	$base-font-family: Arial, Helvetica, Sans-Serif;
3	$base-font-size: 16px;
4	$base-line-height: 1.4;

Luego la nueva solución usando un mapa Sass:

// _config.scss
$font: (
  color: #666,
  family: (Arial, Helvetica),
  size: 16px,
  line-height: 1.4
);

// _presets.scss
body {
  color: map-get($font, color);
  font-family: map-get($font, family);
  font-size: map-get($font, size);
  line-height: map-get($font, line-height);
}

5. Puntos de Interrupción <3

Me encanta este caso de uso. Es magnífico tener un área para los puntos de interrupción que están en su proyecto entero. Así, al igual que la sección sobre el manejo con z-index, usted tiene una visión general de todos los puntos de interrupción utilizados. Si cambia el valor allí, entonces usted cambia el comportamiento en todo el proyecto. Increíble.

Así que comencemos con un mapa llamado $breakpoints.

Nuestro objetivo es utilizar puntos de interrupción con nombres implícitos en lugar de valores de píxeles duros en un elemento. Debido a esto necesitamos un mixin que dará salida al valor del nombre indicado. Llamé al mixin respond-to y paso $breakpoint como un parámetro. Con $value obtengo el valor del punto de interrupción esperado y lo pongo más adelante en la media query.

// Map with much breakpoints
$breakpoints: (
    small: 320px,
    medium: 600px,
    large: 768px
);

// Respond-To Mixin
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        $value: map-get($breakpoints, $breakpoint);
        
        @media screen and (min-width: $value) {
            @content;
        }
    }
    
    @warn "Unknown `#{$breakpoint}` in $breakpoints";
}

Ejemplo:

// Sass
.m-tabs {
    background-color: #f2f2f2;
    
    @include respond-to(medium) {
        background-color: #666;
    }
}

// Output
.m-tabs {
    background-color: #f2f2f2;
}
@media screen and (min-width: 600px) {
    background-color: #666;
}

¡Este caso de uso es uno de mis favoritos!

6. Uso Avanzado para los Colores

Las cosas se están poniendo un poco más difíciles ahora. Echemos un vistazo a los mapas anidados–impresionantes para los esquemas de color con una gama de tonos.

Nuestro mapa Sass en este caso obtiene el nombre $colorscheme y tiene objetos con claves y valores. El proyecto tiene diferentes tonos grises, pero no queremos declarar una variable para cada uno. Así que agregamos un objeto gray, agregamos recortes y luego las claves con valores.

Comience con un mapa como éste aquí:

// Scheme of colors
$colorscheme: (
  gray: (
    base: #ccc,
    light: #f2f2f2,
    dark: #666
  ),
  brown: (
    base: #ab906b,
    light: #ecdac3,
    dark: #5e421c
  )
);

Ahora vamos a agregar la función setcolor para una manera más corta para obtener nuestro color de elección. El primer valor esperado es el objeto del mapa Sass ($scheme) - en este ejemplo podría ser gray o brown. El segundo parámetro es el color que desea ($tone) - el valor predeterminado para esto es la base de las claves.

1	// Our function for shorter usage of map-get();
2	@function setcolor($scheme, $tone: base) {
3	@return map-get(map-get($colorscheme, $scheme), $tone);
4	}

Por último, he aquí un ejemplo de cómo puede usarlo y cómo obtiene los diferentes colores del mapa anidado. ¡Es más fácil de lo que piensa (tal vez)!

// Sass
.element {
  color: setcolor(brown);
}
.element--light {
  color: setcolor(brown, light);
}

// Output
.element {
    color: #ab906b;
}
.element--light {
    color: #ecdac3;
}

Usted ha completado el desafío. Ahora puede crear una paleta sin hinchar el código con demasiadas variables para cada tipo de color.

Para esta técnica me inspiró Tom Davies y le recomiendo que eche un vistazo a su artículo sobre el asunto.

Dando Estilos con Clases

Ahora algo para usuarios avanzados de Sass. En proyectos suele ser un requerimiento crear diferentes tipos de temas con la misma base de código. Así que aquí hay una propuesta para establecer una clase de tema en la parte superior del documento para aplicar una apariencia específica. Necesitamos un objeto donde podamos manejar el nombre de los temas y establecer los diferentes estilos para el módulo.

Defina los temas

Comience con un mapa Sass y defina los temas globalmente para su proyecto. El valor es el nombre y la clase, que debe agregar al elemento <body>. En este ejemplo he creado el mapa $themes con dos variantes: theme-light y theme-dark.

// _config.scss
$themes: (
  theme1: theme-light,
  theme2: theme-dark
);

Obtener el Valor (Camino Corto)

Ahora necesitamos una función para obtener una forma rápida de obtener valores de los módulos. Es una función de ayuda breve y necesita tres parámetros. Estos son:

$map: Define el nombre del mapa de donde provienen todos los valores.
$object: En este caso la clave para el tema.
$style: La propiedad para el estilo que se necesita.

// _functions.scss
@function setStyle($map, $object, $style) {
  @if map-has-key($map, $object) {
    @return map-get(map-get($map, $object), $style);
  }
  @warn "The key ´#{$object} is not available in the map.";
  @return null;
}

Construir el Módulo

Ahora cree un nuevo mapa Sass llamado $config. Cada tema recibe un objeto y el nombre debe ser la misma clave que se define en $themes: si no, obtendrá un error.

// _m-buttons.scss
// 1.Config
$config: (
  theme1: (
    background: #f2f2f2,
    color: #000
  ),
  theme2: (
    background: #666,
    color: #fff
  )
);

Bucle a Través de los Temas

Finalmente la parte con un poco de magia. Comenzamos con un módulo como .m-button y luego queremos crear un aspecto diferente en cada tema. Así que utilizamos @each con $key y $value como valores esperados que obtenemos del mapa $themes. Ahora Sass recorre las claves del mapa y crea algo para cada tema.

Al principio de esta sección mencioné que es necesario que las claves sean las mismas en cada mapa ($themes y $config). Por lo tanto, debemos comprobar si el mapa $config tiene la clave del mapa $themes, así que utilice la función map-has-key(). Si la clave está disponible, haga lo siguiente, de lo contrario, lance un error para informar al desarrollador.

// _m-buttons.scss
// 2.Base
.m-button {
  @each $key, $value in $themes {
    @if map-has-key($config, $key) {
      .#{$value} & {
        background: setStyle($config, $key, background);
        color: setStyle($config, $key, color);
      }
    } @else {
      @warn "The key ´#{$key} isn’t defined in the map $config´"
    }
  }
}

Después de todo el código escrito, echemos un vistazo al resultado. Es magnífico que el área de configuración esté separada de la lógica del módulo.

.theme-light .m-button {
  background: #f2f2f2;
  color: #000;
}
.theme-dark .m-button {
  background: #666;
  color: #fff;
}

Finalmente es el momento de probarlo por usted mismo. Tal vez esta solución no funcione para usted y usted necesite otra, pero en definitiva espero que le ayudará a mantener su código bien. Puede jugar con este ejemplo en Codepen:

Pensamientos Finales

En mis ojos Sass Maps fue la mejor característica que se introdujo en Sass 3.3. Personalmente, siento que son una gran manera de dar a su código base una mejor estructura y crear pequeñas áreas de configuración. Los mapas Sass facilitan el manejo y el cambio de valores sin afectar la lógica de todo el código base. ¡Comience a usarlos hoy, sus compañeros de trabajo estarán agradecidos!

Si ya está utilizando los mapas Sass, ¡háganos saber cómo los usa en sus proyectos.