SASS lists are great, and with multidimensional lists you can get a key-value-like experience, but not completely..

Let’s start out with an example case. We want to have buttons on our website (who doesn’t), but we want them in multiple colors. Off course, lazy programmers we are, we don’t want to define a class for each color. Let’s do that with multidimensional lists.

$button-colors: (
  red #e74c3c,
  blue #3498db,
  green #2ecc71,
)

@each $button-color in $button-colors {
  .button-#{nth($button-color, 1)} {
    background-color: nth($button-color, 2);
  }
}

/* .button-red { background-color: #e74c3c } */
/* .button-blue { background-color: #3498db } */
/* .button-green { background-color: #2ecc71 } */

In the example above we make a list with all the button colors we want. Each item of the list, is a list of two items: the color name (a string) and the color value (Hex Code). Then in the @each loop, we loop through all the colors. For each color we use the nth function to get the first or second item in the list. The first item will be the color name, the second the color value.

In most programming languages, a list or array starts with index 0, in SASS it starts with 1 (which is quite ‘odd’ ;-)). This is important to know when using the nth function.

Now let’s refactor this, using SASS maps:

$button-colors: (
  red: #e74c3c,
  blue: #3498db,
  green: #2ecc71,
)

@each $name, $color in $button-colors {
  .button-#{$name} {
    background-color: $color;
  }
}

This will give the exact same result as in the example above, but the code is cleaner. As you can see the list is now a map with key value pair. The key being the color name and the value being the color hex value. Then we loop through the colors just like before, but now we define a placeholder name for the key and the value (in that order). Now we can just use those variables instead of having to get the ‘nth’ item of a nested list.

As you can see a subtle but nice feature! You will need SASS 3.3 to compile this, try it out. I am excited to hear other use cases that you come up with!

Reference

• Official Documentation: sass-lang.com/documentation/file.SASS_REFERENCE.html#maps