Funciones de listas y mapas en Sass | Explicado

Sass, abreviatura de una hoja de estilo sintácticamente impresionante, admite el uso de varias variables, mezclas, funciones, etc. que a cambio mejoran la capacidad del lenguaje CSS básico. Si hablamos de sus funciones, entonces hay funciones para cadenas, valores numéricos, listas, mapas, etc. Las funciones que se discuten en este artículo son las funciones de la lista y el mapa.

Empecemos.

Lista de funciones en SASS

Las funciones de la lista SASS se utilizan para manipular listas, como evaluar los valores de la lista, las listas de unión o insertar elementos en una lista. Sin embargo, las listas de SASS son rígidas y no representan ningún cambio, por lo tanto, las funciones de la lista que obtienen una nueva lista no alteran la original.

Al igual que las cadenas, las listas de Sass también están basadas en 1, lo que significa que el primer elemento de lista se almacena en el índice 1 en lugar de 0.

agregar (lista, valor, [separador]) función

Esta función adjunta un valor único al final de la lista. Un separador puede representar valores como Auto (predeterminado), coma o espacio.

Ejemplo

Agregar ((a, b, c), (d), coma)

Producción

A B C D

Si se usa espacio.

Ejemplo

Agregar ((a, b, c), (d), espacio)

Producción

A B C D

Función de índice (lista, valor)

Esta función obtiene la posición de índice del valor especificado en la lista.

Ejemplo

índice ((a, b, c, e, f), 3)

Producción

C

Función IS-Bracket (List)

Esta función evalúa si la lista dada consta de soportes cuadrados o no. El resultado está en forma de verdadero o falso.

Ejemplo

IS-Bracketed ([1 2 3])

Producción

verdadero

Si no hay soportes cuadrados.

Ejemplo

IS-BRACKETED (1 2 3)

Producción

FALSO

Función Unir (List1, List2, [Separador, Bracketed])

Esta función adjunta la segunda lista proporcionada al final de la primera lista dada. Un separador puede representar valores como Auto (predeterminado), coma o espacio, mientras que el entreavón puede exhibir valores automáticos (predeterminados), verdaderos o falsos.

Ejemplo

Únete (A B C, D E F)

Producción

A B C D E F

Cuando se usa un separador.

Ejemplo

unirse ((a b c), (d e f), coma)

Producción

A B C D E F

Cuando se usa un soporte.

Ejemplo

Únete (a b c, d e f, $ corchete: verdadero)

Producción

[A B C D E F]

función de longitud (lista)

Para obtener la longitud de la lista, esta función se utiliza.

Ejemplo

Longitud (A, B, C, D)

Producción

4

función de separador (lista)

Esta función obtiene el separador utilizado en la lista como una cadena.

Ejemplo

Lista-separador ((A B C))

Producción

"espacio"

nth (list, n) función

Para obtener el enésimo elemento especificado en la lista, se utiliza esta función.

Ejemplo

nth (a, b, c, 4)

Producción

4

set-nth (lista, n, valor) función

Esta función proporciona el valor especificado al enésimo número en la lista.

Ejemplo

set-nth (a b c, 3, y)

Producción

A b y

Función ZIP (Listas)

Esta función une todas las listas definidas en una lista multidimensional.

Ejemplo

Zip (3px 4px 5px, punteado sólido discontinuo, negro morado negro)

Producción

3px punteado púrpura, 4px de amarillo sólido, 5px de negro discontinuo

Ahora que hemos aprendido sobre las funciones de la lista, ahora nos moveremos a nuestro próximo tema de discusión.

Funciones de mapa en SASS

Los mapas en SASS consisten en múltiples pares de valor clave que se pueden evaluar utilizando funciones de mapa. Además, también puede usar las funciones de la lista para examinar los mapas en Sass, sin embargo, cuando lo haga, los mapas se considerarán como listas con dos elementos.

Al igual que las listas, los mapas en SASS son rígidos y no exhiben ningún cambio; Por lo tanto, las funciones del mapa que obtienen un nuevo mapa no alteran el original.

Map-get (mapa, tecla) función

Esta función obtiene el valor vinculado a la clave definida en el mapa.

Ejemplo

$ color: ("negro": #000000, "púrpura": #6a0dad)
map-get ($ color, "púrpura")

Producción

#6a0dad

mapa-ha-ha-key (mapa, tecla) función

Esta función evalúa si la clave definida está presente en el mapa o no y proporciona el resultado en verdadero o falso.

Ejemplo

$ color: ("negro": #000000, "púrpura": #6a0dad)
map-ha-key ($ color, "amarillo")

Producción

FALSO

Función MAP-KEYS (MAP)

Esta función obtiene todas las teclas en un mapa.

Ejemplo

$ color: ("negro": #000000, "púrpura": #6a0dad)
Keys de mapas ($ color)

Producción

"Negro", "púrpura"

MAP-MERGE (MAP1, MAP2) Función

Para adjuntar MAP2 al final de MAP1, se utiliza esta función.

Ejemplo

$ color: ("negro": #000000, "púrpura": #6a0dad)
$ color1: ("rosa": #ffc0cb, "marrón": #964b00)
mapa-ferina ($ color, $ color1)

Producción

Black ": #000000," Purple ": #6a0dad," Pink ": #FFC0CB," Brown ": #964b00

Map-Remove (mapa, teclas ...) función

Esta función elimina todas las teclas establecidas del mapa.

Ejemplo

$ Color: ("Pink":#FFC0CB, "Brown":#964b00, "Negro":#000000)
map-remove ($ color, "marrón")

Producción

"Pink":#FFC0CB, "Black":#000000

función de valores de mapa (mapa)

Esta función obtiene todos los valores presentes en el mapa.

Ejemplo

$ Color: ("Pink":#FFC0CB, "Brown":#964b00, "Negro":#000000)
Valores de mapas ($ color)

Producción

#FFC0CB, #964B00, #000000

Conclusión

Las funciones de la lista SASS se utilizan para manipular listas, como evaluar los valores de la lista, las listas de unión o insertar elementos en una lista. Mientras tanto, los mapas en SASS consisten en múltiples pares de valor clave que se pueden evaluar utilizando funciones de mapas. Tanto las listas como los mapas son rígidos y no exhiben ningún cambio; Por lo tanto, cualquier función que obtenga una nueva lista o mapa no altera la original. Todas las funciones asociadas con listas y mapas en SASS se explican en este artículo junto con ejemplos.