Web Development

Sass/SCSS Maps

Working with Sass maps (key-value pairs)

Define Map

$colors: ( # define map
    primary: #3498db,
    success: #2ecc71,
    danger: #e74c3c
);

Get Value

.button {
    background: map-get($colors, primary); # get value by key
}

Map Functions

map-has-key($colors, primary) # check if key exists
map-keys($colors) # get all keys
map-values($colors) # get all values
map-merge($map1, $map2) # merge maps

Loop Through Map

@each $name, $color in $colors {
    .text-#{$name} {
        color: $color;
    }
}