Save time with multi-dimensional SASS maps

Buttons are a great example; .btn-primary, .btn-secondary, .btn-special etc. all have border colours, text colours and background colours. That's a lot of classes to write out when it's the same values that are changing every time.

This can get out of hand depending on how many button styles you have. Even a small number can bloat the SASS file and make it hard to maintain. Even Bootstrap suffers from this to some extent.

The answer lies in using SASS maps.

More specifically sass maps within a sass map.

Play with this Gist on SassMeister

$buttons is the name of the map object and each line within it is another map. Simply specify the .btn-{modifier} class name, the background-color, border-color and text color. The mixin iterates over map and then references the value of the sub-map in each position.

#{nth($b,1)} will return the first value — the modifier class name. It needs the #{} so it can be interpolated and used as part of the class name.

There may be a way to set key:value pairs to make it more obvious which parameter is being used for but adding a comment above suffices.

You can use as many comma separated values as you like. Just remember to reference them with their corresponding number. Sass maps aren't 0 based so the 1 refers to the first value and not the second as with other languages.

TL;DR

Sass maps are cool and you should be cool too. Play with this Gist on SassMeister