SASS maps

Oct 19, 2014

SASS maps are neat. They are essentially a hash (key/value) data structure within SASS. It’s useful for storing tidbits that are littered about frontend code, things like padding and margin values. Maps are the perfect tool for bringing consistency (and sanity) to a SASS codebase.

$margin: (
  extra-small: 0.5em,
  small: 1em,
  default: 1.4em
);

Extracting values is done through the map-get directive.

.container {
  margin: map-get($margin, default);
}