🥇 Substitua uma lista SASS por um mapa SASS

SASS tem um novo tipo de dados (docs)

Digamos que você tenha um fabricante de botões (muito simples). A única coisa necessária é um tamanho de fonte e um raio de borda.

Para mantê-lo escalável, você pode querer criar uma lista de valores e um mixin para defini-los.

$sizes: "small" 1px 1.2rem, "medium" 2px 1.6rem, "large" 3px 2rem

=button-maker($size)
    @each $sizeVal in $sizes
        @if $size == "#{nth($sizeVal, 1)}"
            border-radius: nth($sizeVal, 2)
            font-size: nth($sizeVal, 3)

Mas agora você pode apenas criar um mapa e obter seus valores!

$sizes: (smallBorderRadius: 1px, smallFontSize: 1.2rem, mediumBorderRadius: 2px, mediumFontSize: 1.6rem, largeBorderRadius: 3px, largeFontSize: 2rem)

=button-maker($size)
    border-radius: map-get($sizes, "#{$size}BorderRadius")
    font-size: map-get($sizes, "#{$size}FontSize")

Assim, basta alimentar o que você está chamando de tamanho, neste caso pequeno, médio e grande. Chega de loops e @ifdeclarações confusas !

ATUALIZAR

Eu criei uma terceira maneira de usar um mapa com listas dentro dele para mantê-lo (subjetivamente) um pouco mais limpo. Confira no sassmeister

http://sassmeister.com/gist/9531083

ou veja a essência aqui

https://gist.github.com/chrisdl/9531083

Related Posts