Sass 3.3 introduced a new maps data type—you can create a variable that holds comma-separated, key-value pairs, and allows you to do some neat things like call a value by the key or loop through the key-value pairs.

Maps

Here’s what the maps data type looks like:

$variable: (
  key1: value1,
  key2: value2,
  key3: value3
);

You can read more about maps right from the Sass documentation.

map-get()

To get the value of a map based on the key, you’ll use the map-get() function like such:

.class {
  attribute: map-get($variable, key1);
}

You can read more about the map-get() function from the Sass documentation as well.

Usage

It’s pretty straight forward, but here’s an example of how you can make it useful in practice.

$colors: (
  black: #000,
  white: #fff
);

a {
  color: map-get($colors, white);
  background: map-get($colors, black);
}

The resulting CSS should look as follows:

a {
  color: #fff,
  background: #000
}

The problem I have with map-get is that it isn’t elegant and requires more typing than setting a $white variable.

Here’s my approach to making it a bit more elegant by creating a custom color function:

@function color($color-name) {
  @return map-get($colors, $color-name);
}

a {
  color: color(white);
  background: color(black);
}

Loops and Maps

Using loops with maps, you can also have a lot of fun and save lots of time. Here’s an example:

<nav class="social">
  <a class="social-link social-link--dribbble">Dribbble</a>
  <a class="social-link social-link--facebook">Facebook</a>
  <a class="social-link social-link--github">Github</a>
  <a class="social-link social-link--google">Google</a>
  <a class="social-link social-link--twitter">Twitter</a>
</nav>

$social-colors: (
  dribbble: #ea4c89,
  facebook: #3b5998,
  github: #171515,
  google: #db4437,
  twitter: #55acee
);

.social-link {
  color: white;
}

@each $social-network, $social-color in $social-colors {
  .social-link--#{$social-network} {
    background: $social-color;
  }
  .social-link--#{$social-network}:hover {
    background: lighten($social-color, 10%);
  }
}

So that’ll result in the following CSS:

.social-link                 {color: white;}
.social-link--dribbble       {background: #ea4c89;}
.social-link--dribbble:hover {background: #ef7aa7;}
.social-link--facebook       {background: #3b5998;}
.social-link--facebook:hover {background: #4c70ba;}
.social-link--github         {background: #171515;}
.social-link--github:hover   {background: #322d2d;}
.social-link--google         {background: #db4437;}
.social-link--google:hover   {background: #e36c62;}
.social-link--twitter        {background: #55acee;}
.social-link--twitter:hover  {background: #83c3f3;}

Sass 3.3

In order to take advantage of maps, you’ll need to be running Sass >= 3.3. To upgrade Sass on your machine, run the following in your command line:

gem update sass

You may have to run the command with sudo: sudo gem update sass

To see what version of Sass you’re running, run the following:

sass -v