Mapas

Os mapas na Sass seguram pares de chaves e valores, tornam fácil o ato de procurar um valor através da sua chave correspondente. São escritos (<expression>: <expression>, <expression>: <expression>). A expressão antes dos : é a chave, e a expressão depois é o valor associado aquela chave. As chaves devem ser únicas, mas os valores podem ser duplicados. Ao contrário das listas, os mapas devem ser escritos com parênteses a sua volta. Um mapa sem pares é escrito como ().

Os mapas permitem quaisquer valores de Sass seja usados como suas chaves. O operador == é usado para determinar se duas chaves são iguais.

Usando MapasUsando Mapas permalink

Já que mapas não são valores de CSS válidos, não fazem muito de nada por conta própria. É por isto que a Sass fornece um grupo de funções para criar os mapas e acessar os valores que contêm.

Procurar um ValorProcurar um Valor permalink

Mapas são sobre a associação de chaves e valores, assim existe naturalmente uma maneira de receber o valor associado com uma chave: a função map.get($map. $key)! Esta função retorna o valor no mapa associado com a dada chave. Ela retorna null se o mapa não conter a chave:

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.get($font-weights, "medium")  // 500
@debug map.get($font-weights, "extra-bold")  // null

Fazer Algo com Todos ParesFazer Algo com Todos Pares permalink

Isto na realidade não usa uma função, mas continua a ser uma das maneiras mais comuns de usar os mapas. A [regra @each] avalia um bloco de estilos para cada par de chave e valor num mapa. A chave e o valor são atribuídos às variáveis assim podem facilmente ser acessadas no bloco:

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

@each $name, $glyph in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph

.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
}

Adicionar à um MapaAdicionar à um Mapa permalink

É também útil adicionar novos pares à um mapa, ou substituir o valor para uma chave existente. a função map.set($map, $key, $value) faz isto: ela retorna uma cópia de $map com o valor em $key definido para $value:

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.set($font-weights, "extra-bold", 900);
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900);
// ("regular": 400, "medium": 500, "bold": 900)

@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.set($font-weights, "extra-bold": 900)
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900)
// ("regular": 400, "medium": 500, "bold": 900)

Ao invés de definir valores um por um, podes também combinar dois mapas existentes usando map.merge($map1, $map2):

@use "sass:map";

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

@use "sass:map"

$light-weights: ("lightest": 100, "light": 300)
$heavy-weights: ("medium": 500, "bold": 700)

@debug map.merge($light-weights, $heavy-weights)
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

Se ambos mapas tiverem as mesmas chaves, os valores do segundo mapa são usados no mapa que for retornado:

@use "sass:map";

$weights: ("light": 300, "medium": 500);

@debug map.merge($weights, ("medium": 700));
// ("light": 300, "medium": 700)

@use "sass:map";

$weights: ("light": 300, "medium": 500)

@debug map.merge($weights, ("medium": 700))
// ("light": 300, "medium": 700)

Nota que uma vez que os mapas de Sass são imutáveis, map.set() e map.merge() não modificam a lista original.

ImutabilidadeImutabilidade permalink

Os mapas na Sass são imutáveis, o que significa que o conteúdo dum valor do mapa nunca muda. As funções do mapa da Sass retornam todas novos mapas ao invés de modificarem os originais. A imutabilidade ajuda a evitar muitos erros de programação sorrateiros que podem infiltrar-se quando o mesmo mapa for partilhado através de diferentes partes da folha de estilos.

Mesmo assim podes continuar a atualizar o teu estado ao longo do tempo atribuindo novos mapas para a mesma variável. Isto é muitas vezes usado em funções e misturas para rastrear a configuração num mapa:

@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@mixin add-browser-prefix($browser, $prefix) {
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global;
}

@include add-browser-prefix("opera", o);
@debug $prefixes-by-browser;
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)

@use "sass:map"

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@mixin add-browser-prefix($browser, $prefix)
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global


@include add-browser-prefix("opera", o)
@debug $prefixes-by-browser
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)