Using Maps In SCSS

You can collect a set of like values into a map with the following SCSS syntax:

$backgrounds: (
  "gray": #AAAAAA,
  "red": #FF4136,
  "blue": #0074D9,
);

You can then access a value from the map using the map-get function:

.boxA {
  background-color: map-get($backgrounds, "gray");
}

.boxB {
  background-color: map-get($backgrounds, "red");
}

.boxC {
  background-color: map-get($backgrounds, "blue");
}

See a live example here.

Last updated