Sass maps

Watch "Working with the map data type" on LinkedIn Learning

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;
  }
}

Try it yourself on Sassmeister