Sass maps
Maps are a collection of key / value pairs. The keys and values are separated by a colon (:) and each is separated by a comma (,). Maps must be written with parentheses.
The map-get() function can be used to access a value from a map.
$grey: (
"light": #eee,
"medium": #999,
"dark": #666
);
.box {
background-color: map-get($grey, "light");
border: 2px solid map-get($grey, "medium");
color: map-get($grey, "dark");
}
The @each rule can also be on a map to dynamically create style definitions. Both the key and value are assigned to variables so that they can be accessed in the block.
$buttons: (
"default": #6c757d,
"cool": #007bff,
"hot": #dc3545,
);
%button {
display: inline-block;
padding: .375rem .75rem;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
color: #fff;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
@each $button, $color in $buttons {
.button-#{$button} {
@extend %button;
background-color: $color;
border-color: $color;
}
}