Sass Name Spacing with List Maps

Sass 3.3 added a few cool features. One of them is List Maps which allow us to map a key to a value. This makes it easier to organize your code into components by name spacing styles in variables.

$global-color: #a3a3a3;
$button:(
    disabled lighten ($global-color, 30%),
    disabled-border lighten ($global-color, 60%),
    selected darken ($global-color, 30%),
    selected-border darken ($global-color, 60%)
);

This way, as the project grows we can keep adding styles to the variable $button and choose which ones we want to use with each different button. This approach improves organization, maintenance, and consistency for your styles across the whole project.
So now all we need is a way to apply the list map’s styles to an element, which leads me to the new built-in functions, also added in version 3.3.

map-get()

These new built in functions allow us to use the list maps in our own mixins or functions. The map-get() function looks up a key from it’s map in order to access styles. It takes two parameters, the first is the variable or $map and the second is the style or $key that you want to use. So, in our case the map is the variable $button and the key is any of the name spaced styles we created earlier, it would look like this~

.disabled {
  background-color: map-get($button, disabled);
  border-color: map-get($button, disabled-border);

  }

.selected {
  background-color: map-get($button, selected);
  border-color: map-get($button, selected-border);
  }

So now we can keep adding styles under the $button name space and choose to use the ones we need on the elements we need them on, and we won’t end up having variables with names like $contact-button-disabled-border-left in order to keep things separate.