We code the web

Goodbye nested lists, hello SASS maps!

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!


Related posts

Faster CSS coding with Hayaku

Lately a good friend of mine showed me this plugin for Sublime Text called Hayaku. I had never heard of it so I asked him what it was. It’s like Emmet for CSS. Hey, I know Emmet, it makes writing HTML and CSS easier, so what’s this about?

Is Compass dead?

For a long time I have been a dedicated user of the SASS+Compass stack. It is great not having to provide workarounds and fixes for each browser in your CSS. Compass mixins saved me a lot of trouble. So why ask the question in this title?

Using icon fonts with SASS

Sometimes you want to display an icon in your website somewhere, but you do not want to touch the HTML. For instance if you have an auto-generated link in your CMS and you want to prefix it with an icon. This is actually very easy to do, because that is exactly what icon font vendors like Bootstrap Glyphicons and FontAwesome already do!