Variáveis simples x Maps

[felipefialho]

A @akfzambrana fez uma talk sensacional no Meetup CSS falando sobre Sass Map. E observei que as pessoas tem usado bastante esse recurso para paletas, brands e etc.

E ai caiu a ficha... eu só uso o Map do Stylus para z-index.

Como estou no iniciando um projeto novo, curto testar novas abordagens, como disse na #339.

Queria que me dessem motivos e razões (ou não) para mudar das variáveis simples para maps o/

[felipefialho]

Eu pergunto e eu mesmo respondo.

Uma vantagem de usar maps é fazer coisas desse tipo:

  for key, color in $pallets
    [brand=\"{key}\"]
      &:before
        background-color rgba(color, .85)

      &:not(.in):focus
      &:not(.in):hover
        background-color rgba(color, 1)

[raphaguasta]

Uma dúvida da sua dúvida @lfeh... Não achei o map de z-index no arquivo que vc linkou!

Tbm não uso mtos maps, mas acredito que pra coisas onde nossas variáveis repetem prefixos podem servir...

Aquelas vars que usamos como nome-primary, nome-secondary, etc...
Então usando prop: map-get($map, name) fica mais organizado. Isso exclui tbm a possibilidade de alguém cometer enganos como primary-color ou invés de color-primary.

[akfzambrana]

Uma das principais vantagens em projetos de médio a grande porte (e na criação de frameworks proprios) é a organização e leitura do "grupo" de variáveis. Em vez de utilizar variáveis compostas como "nome-x" vc cria um mapa chamado $nome e dai somente as chaves internas, isso facilita achar algo rapidamente e a agrupar conforme o projeto for crescendo.

Quando o projeto é pequeno, acredito que não vale a pena a troca de variáveis por mapas a menos q vc ja tenha o costume de utilizar e curta a organização, pois os mapas adicionam uma complexidade a mais, especialmente se trabalhar com Sass. No entanto, como vc utiliza Stylus, acredito q mapas vão ser só sucesso já que a chamada do mapa é muito mais simples e intuitiva no Stylus do que no Sass como o @Mendrone mostrou no Twitter.

Deixo aqui um exemplo do arquivo de configurações que utilizo no trabalho para que vocês possam ter uma ideia sobre como nós utilizamos em projetos que estão entrando em produção.

Também pode dar uma olhada no meu projeto Snaps onde vou guardando componentes completos que utilizo (está meio desatualizado, mas serve como referencia para pesquisa)

Os artigos abaixo também mostram alguns exemplos de uso:
https://www.sitepoint.com/using-sass-maps/
https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184
https://www.viget.com/articles/sass-maps-are-awesome
http://thesassway.com/news/sass-3-3-released
http://elijahmanor.com/nested-maps-for-typesetting-in-sass/

[akfzambrana]

@lfeh outra vantagem desse modelo q vc colocou ai, seria gerar "temas completos" (vários arquivos CSS finais ou algo do tipo) apenas com um mísero mapa de configuração

[vitor-mendrone-deel]

@fernandofleury

[fernandofleury]

eu honestamente não gosto, só vejo vantagem em poder trabalhar com um fail safe dentro de map. mas fora isso notação de objeto sempre vai ser mais simples e intuitivo. fazer a[b][c] é mais rápido e performático.

o sass usa uma implementação de maps pra seguir a proposta mais funcional deles, e deixar mais "robusto", mas não vejo caso de uso onde isso seja diferencial.

claro que no sass você sempre vai ter que usar map, afinal é o que tem

[eduardojmatos]

Usei o Stylus e suas Hashes, e realmente fica mais fácil acessar as properties do objeto. No Sass, a única diferença, falando em termos de código, é ter que usar o método map-get e precisar da ajuda do famoso map-deep-get em alguns casos.

No fim, o propósito de ambos é o mesmo, mas pra quem está acostumado com notação de objeto, Hashes fazem mais sentido.

No GetNinjas estamos usando maps pra definir nossos botões de forma automatizada, além de paleta de cores e gradientes. Ainda estamos testando pra ver a praticidade disso, se faz sentido pra nossa arquitetura e se vai escalar quando quisermos adicionar uma par de botões novos ou dar manutenção nos atuais.

Criamos também um método pra pegarmos uma cor da paleta usando map-deep-get com "variable arguments" e algumas options, como opacity, a key da cor e uma palette opcional (essa, também um map). Tudo em teste ainda, mas quando estivermos com a ideia mais madura vou soltar um post mais completo explicando o que funcionou pra gente.

---

Essa talk da @akfzambrana é muito bacana!!!!