Mapas en SASS

Este artículo explica los mapas en SASS.

Explicaremos desde lo básico hasta el uso avanzado de los mapas en SASS, y proporcionaremos ejemplos prácticos.

YouTube Video

Mapas en SASS

¿Qué es un mapa en SASS?

Un mapa en SASS es una estructura de datos que contiene pares de clave y valor, similar a los objetos en JavaScript o los diccionarios en Python. Al usar mapas en SASS, puedes gestionar estilos complejos de manera concisa y mejorar la mantenibilidad.

Sintaxis básica de los mapas

Los mapas en SASS se definen usando () (paréntesis). La sintaxis es la siguiente:.

1$map-name: (
2  key1: value1,
3  key2: value2,
4  key3: value3
5);

Por ejemplo, para crear un mapa que gestione temas de color, puedes definirlo como se muestra a continuación:.

1$colors: (
2  primary: #3498db,
3  secondary: #2ecc71,
4  danger: #e74c3c
5);

Obtener valores de un mapa

En SASS, se utiliza la función map.get() para obtener un valor de un mapa.

Ejemplo de uso:

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8.button {
 9  background-color: map.get($colors, primary);
10}

Salida:

1.button {
2  background-color: #3498db;
3}

• Este código obtiene el valor de color primary del mapa $colors y lo aplica al color de fondo del botón.

Establecer claves y valores en un mapa

Usando la función map.set(), puedes asignar un nuevo valor a una clave específica. Si la clave ya existe, su valor será sobrescrito.

Uso de Ejemplo

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8// set danger color
 9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12  background-color: map.get($updated-colors, danger);
13}

• Este código añade una clave danger al mapa y establece su valor como el color de fondo del botón.

Salida

1.button-danger {
2  background-color: #e74c3c;
3}

Eliminar claves de un mapa

Al usar la función map.remove(), puedes eliminar una clave específica y su valor de un mapa.

Uso de Ejemplo

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13  background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17  background-color: map.get($reduced-colors, danger);
18}

• Este código elimina la clave danger del mapa, por lo que el color de fondo de button-danger será null.

Salida

1.button-primary {
2  background-color: #3498db;
3}

Añadir claves y valores a un mapa

Usando la función map.merge(), puedes agregar nuevas claves y valores a un mapa existente.

Uso de Ejemplo

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (danger: #e74c3c));
 9
10.button-danger {
11  background-color: map.get($extended-colors, danger);
12}

• Este código añade una clave danger a un mapa de SASS existente y asigna su color como el color de fondo del botón.

Salida

1.button-danger {
2  background-color: #e74c3c;
3}

Añadir múltiples claves y valores a un mapa

Con la función map.merge(), puedes agregar múltiples nuevas claves y valores a un mapa existente de una sola vez.

Uso de Ejemplo

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (
 9  danger: #e74c3c,
10  warning: #f39c12,
11  info: #8e44ad
12));
13
14.button-danger {
15  background-color: map.get($extended-colors, danger);
16}

• Este código añade varias claves y valores al mismo tiempo a un mapa de SASS existente.

Comprobar la existencia de claves en un mapa

La función map.has-key() te permite verificar si una clave específica existe en un mapa.

Uso de Ejemplo

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger);  // false

Obtener todas las claves o valores de un mapa

Obtener todas las claves

Usando la función map.keys(), puedes obtener todas las claves.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)

Obtener todos los valores

Usando la función map.values(), puedes obtener todos los valores.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)

Recorrer un mapa

En SASS, puedes usar la directiva @each para recorrer un mapa.

Uso de Ejemplo

 1$colors: (
 2  primary: #3498db,
 3  secondary: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $color in $colors {
 8  .color-#{$name} {
 9    background-color: $color;
10  }
11}

• Este código recorre cada clave y valor en un mapa de SASS y genera automáticamente una clase para cada color.

Salida

 1.color-primary {
 2  background-color: #3498db;
 3}
 4
 5.color-secondary {
 6  background-color: #2ecc71;
 7}
 8
 9.color-danger {
10  background-color: #e74c3c;
11}

Manejo de mapas anidados

Los mapas también pueden tener una estructura anidada. En este caso, utiliza funciones map.get() anidadas.

Uso de Ejemplo

 1@use "sass:map";
 2
 3$themes: (
 4  light: (
 5    background: #ffffff,
 6    text: #000000
 7  ),
 8  dark: (
 9    background: #000000,
10    text: #ffffff
11  )
12);
13
14body {
15  background-color: map.get(map.get($themes, light), background);
16  color: map.get(map.get($themes, light), text);
17}

• Este código obtiene los colores de fondo y de texto para el tema light de un mapa anidado de SASS y los aplica al body.

Salida

1body {
2  background-color: #ffffff;
3  color: #000000;
4}

Caso de uso de mapas: diseño responsivo

Al usar mapas, puedes gestionar fácilmente media queries y el diseño responsivo.

Uso de Ejemplo

 1$breakpoints: (
 2  small: 480px,
 3  medium: 768px,
 4  large: 1024px
 5);
 6
 7@each $label, $size in $breakpoints {
 8  @media (max-width: $size) {
 9    .container-#{$label} {
10      width: 100%;
11    }
12  }
13}

• Este código usa un mapa de SASS para generar automáticamente clases de contenedor responsivas para cada punto de ruptura.

Salida

 1@media (max-width: 480px) {
 2  .container-small {
 3    width: 100%;
 4  }
 5}
 6
 7@media (max-width: 768px) {
 8  .container-medium {
 9    width: 100%;
10  }
11}
12
13@media (max-width: 1024px) {
14  .container-large {
15    width: 100%;
16  }
17}

Conclusión

Los mapas en SASS son una herramienta poderosa para organizar tu hoja de estilos, aumentando la flexibilidad y reutilización. Pueden usarse en muchos escenarios, como la gestión de valores, bucles y la implementación de diseño responsivo.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video