Mapas no SASS

Este artigo explica mapas no SASS.

Vamos explicar do básico ao avançado o uso de mapas no SASS, além de fornecer exemplos práticos.

YouTube Video

Mapas no SASS

O que é um mapa no SASS?

Um mapa no SASS é uma estrutura de dados que armazena pares chave-valor, semelhante a objetos em JavaScript ou dicionários em Python. Ao usar mapas no SASS, você pode gerenciar estilos complexos de forma concisa e melhorar a manutenção.

Sintaxe básica dos mapas

Mapas no SASS são definidos usando () (parênteses). A sintaxe é a seguinte:.

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

Por exemplo, para criar um mapa para gerenciar temas de cores, você pode defini-lo conforme mostrado abaixo:.

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

Obtendo valores de um mapa

No SASS, você usa a função map.get() para obter um valor de um mapa.

Exemplo 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}

Saída:

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

• Este código obtém o valor da cor primary do mapa $colors e aplica como cor de fundo do botão.

Definindo chaves e valores em um mapa

Usando a função map.set(), você pode atribuir um novo valor a uma chave especificada. Se a chave já existir, o seu valor será sobrescrito.

Exemplo de Uso

 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 adiciona a chave danger ao mapa e define seu valor como a cor de fundo do botão.

Saída

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

Removendo chaves de um mapa

Usando a função map.remove(), você pode remover uma chave específica e seu valor de um mapa.

Exemplo de Uso

 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 remove a chave danger do mapa, então a cor de fundo do button-danger será null.

Saída

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

Adicionando chaves e valores a um mapa

Usando a função map.merge(), você pode adicionar novas chaves e valores a um mapa existente.

Exemplo de Uso

 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 adiciona a chave danger a um mapa SASS existente e define a sua cor como cor de fundo do botão.

Saída

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

Adicionando várias chaves e valores a um mapa

Com a função map.merge(), você pode adicionar várias novas chaves e valores a um mapa existente ao mesmo tempo.

Exemplo de Uso

 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 adiciona várias chaves e valores ao mesmo tempo a um mapa SASS existente.

Verificando chaves em um mapa

A função map.has-key() permite que você verifique se uma chave específica existe em um mapa.

Exemplo de Uso

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

Obtendo todas as chaves ou valores de um mapa

Obtendo todas as chaves

Usando a função map.keys(), você pode obter todas as chaves.

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

Obtendo todos os valores

Usando a função map.values(), você pode obter todos os valores.

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

Percorrendo um mapa

No SASS, você pode usar a diretiva @each para percorrer um mapa.

Exemplo de Uso

 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 percorre cada chave e valor de um mapa SASS e gera automaticamente uma classe para cada cor.

Saída

 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}

Trabalhando com mapas aninhados

Os mapas também podem ter uma estrutura aninhada. Nesse caso, use funções map.get() aninhadas.

Exemplo de Uso

 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 obtém as cores de fundo e texto do tema light de um mapa SASS aninhado e as aplica ao body.

Saída

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

Caso de uso de mapas: Design Responsivo

Usando mapas, você pode gerenciar facilmente media queries e design responsivo.

Exemplo de Uso

 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 um mapa SASS para gerar automaticamente classes de container responsivas para cada breakpoint.

Saída

 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}

Conclusão

Mapas SASS são uma ferramenta poderosa para organizar seu stylesheet, aumentando a flexibilidade e a reutilização. Eles podem ser usados em muitos cenários, como gerenciamento de valores, loops, e implementação de design responsivo.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video