Funções de lista e mapa em SASS | Explicado

SASS, abreviação de folha de estilo sintaticamente impressionante, suporta o uso de várias variáveis, mixins, funções, etc. Se falarmos sobre suas funções, existem funções para strings, valores numéricos, listas, mapas, etc. As funções discutidas neste artigo são funções de lista e mapa.

Vamos começar.

Funções de lista em SASS

As funções da lista de SASS são usadas para manipular listas como avaliar valores da lista, unir listas ou inserir itens em uma lista. No entanto, as listas de Sass são rígidas e não renderizam nenhuma alteração, portanto, a lista funciona que buscam uma nova lista não alteram a original.

Como as strings, as listas de Sass também são baseadas em 1, o que significa que o primeiro item da lista é armazenado no índice 1 em vez de 0.

Appender (List, Value, [Separator]) Função

Esta função atribui um único valor no final da lista. Um separador pode renderizar valores como automático (padrão), vírgula ou espaço.

Exemplo

anexar ((a, b, c), (d), vírgula)

Saída

A, B, C, D

Se o espaço for usado.

Exemplo

anexar ((a, b, c), (d), espaço)

Saída

A B C D

Função de índice (lista, valor)

Esta função busca a posição do índice do valor especificado na lista.

Exemplo

ÍNDICE ((A, B, C, E, F), 3)

Saída

c

Função de Is Bracketted (List)

Esta função avalia se a lista fornecida consiste em colchetes ou não. O resultado está na forma de verdadeiro ou falso.

Exemplo

Bracketted ([1 2 3])

Saída

verdadeiro

Se não houver suportes quadrados.

Exemplo

Bracketted (1 2 3)

Saída

falso

Join (List1, List2, [Separator, Bracketed]) Função

Esta função anexa a segunda lista fornecida no final da primeira lista de dados. Um separador pode renderizar valores como automático (padrão), vírgula ou espaço, enquanto isso, o colchete pode exibir automaticamente (padrão), verdadeiro ou valores falsos.

Exemplo

Junte -se (A B C, D e F)

Saída

A B C D E F

Quando um separador é usado.

Exemplo

Junte -se ((a b c), (d e f), vírgula)

Saída

A, B, C, D, E, F

Quando um colchetado é usado.

Exemplo

Junte -se (a b c, d e f, $ entre colcheted: true)

Saída

[A, B, C, D, E, F]

Função de comprimento (lista)

Para o objetivo de buscar o comprimento da lista, esta função é utilizada.

Exemplo

comprimento (a, b, c, d)

Saída

4

Função de List-Separator (Lista)

Esta função busca o separador usado na lista como uma string.

Exemplo

Lista-Separator ((A B C))

Saída

"espaço"

Nth (List, N) Função

Para buscar o enésimo elemento especificado na lista, essa função é utilizada.

Exemplo

Nth (a, b, c, 4)

Saída

4

Função definida (lista, n, valor)

Esta função fornece o valor especificado para o número de número da lista.

Exemplo

Conjunto-nth (A B C, 3, Y)

Saída

A b y

função ZIP (listas)

Esta função se junta a todas as listas definidas em uma lista multidimensional.

Exemplo

ZIP (3px 4px 5px, Solid Solid, pavor, preto amarelo roxo)

Saída

3px roxo pontilhado, 4px amarelo sólido, 5px preto tracejado

Agora que aprendemos sobre as funções da lista, agora mudaremos para o nosso próximo tópico de discussão.

Funções de mapa em Sass

Os mapas no SASS consistem em vários pares de valor-chave que podem ser avaliados usando funções de mapa. Além disso, você também pode usar as funções da lista para examinar os mapas em SASS, no entanto, ao fazê -lo, os mapas serão considerados como listas com dois elementos.

Assim como listas, os mapas em Sass são rígidos e não exibem nenhuma alteração; Portanto, as funções do mapa que buscam um novo mapa não alteram o original.

Função de mapa-get (mapa, chave)

Esta função busca o valor vinculado à chave definida no mapa.

Exemplo

$ cor: ("preto": #000000, "roxo": #6a0dad)
mapa-get ($ color, "roxo")

Saída

#6a0dad

Função de mapa-ha-key (mapa, chave)

Esta função avalia se a chave definida estiver presente no mapa ou não e fornece o resultado em verdadeiro ou falso.

Exemplo

$ cor: ("preto": #000000, "roxo": #6a0dad)
Map-Has-key ($ color, "amarelo")

Saída

falso

Função de Map-Meching (mapa)

Esta função busca todas as chaves em um mapa.

Exemplo

$ cor: ("preto": #000000, "roxo": #6a0dad)
Keys de mapa ($ cor)

Saída

"Black", "roxo"

Função Map-Merge (MAP1, MAP2)

Para anexar o MAP2 no final do mapa1, esta função é usada.

Exemplo

$ cor: ("preto": #000000, "roxo": #6a0dad)
$ color1: ("rosa": #ffc0cb, "marrom": #964b00)
Map-Merge ($ color, $ color1)

Saída

preto ”: #000000,“ roxo ”: #6a0dad,“ rosa ”: #ffc0cb,“ Brown ”: #964B00

Função do mapa (mapa, chaves…)

Esta função elimina todas as chaves declaradas do mapa.

Exemplo

$ cor: ("rosa":#ffc0cb, "marrom":#964b00, "preto":#000000)
Map-Remove ($ Color, "Brown")

Saída

“Pink”:#ffc0cb, “preto”:#000000

Função de mapa (mapa)

Esta função busca todos os valores presentes no mapa.

Exemplo

$ cor: ("rosa":#ffc0cb, "marrom":#964b00, "preto":#000000)
valores de mapa ($ color)

Saída

#ffc0cb, #964B00, #000000

Conclusão

As funções da lista de SASS são usadas para manipular listas como avaliar valores da lista, unir listas ou inserir itens em uma lista. Enquanto isso, os mapas no SASS consistem em vários pares de valor-chave que podem ser avaliados usando funções de mapa. As listas e os mapas são rígidos e não exibem nenhuma alteração; Portanto, qualquer função que busque uma nova lista ou mapa não altera a original. Todas as funções associadas a listas e mapas no SASS são explicadas neste artigo, juntamente com exemplos.