Exploring Maps In Sass 3.3 (Part 3): Calling Variables with Variables

For this blog entry, the third in a series about Sass Maps, I am going to move away from niche application, and introduce some more practical uses of maps.

Living Style Guides

In my current project, a large Drupal media site,  I wanted to have a style guide, a single static page where we could see all of the site colors, along with the variable name. I collected all of my color variables, and created some static markup with empty divs. Below is the loop I started to write.

<!-- The HTML for our Style Guide -->
<div class="styleguide">
  <div class="primary-color"></div>
  <div class="secondary-color"></div>
  <div class="tertiary-color"></div>
</div>

// Our site color variables
$primary-color: #111111;
$secondary-color: #222222;
$tertiary-color: #333333;
// Make a list of the colors to display
$styleguide-colors: primary-color, secondary-color, tertiary-color;
// Loop through each color name, create class name and styles
@each $color in $styleguide-colors {
  .styleguide .#{$color} {
    background-color: $#{$color}; // Spoiler Alert: Does not work!!
    &:after {
      content: “variable name is #{$color}”
    }
  }
}

   This loop goes through each color in my $styleguide-colors list and creates a class name based on the color name. It then attempts to set the background-color by calling a variable that matches the name from the list. We also set the content of a pseudo element to the variable name, so that our styleguide automatically prints out the name of the color.

   This is what we want the first loop to return:

.styleguide .primary-color {
 background-color: $primary-color; // Nope, we won’t get this variable
 &:after {
     content: “variable name is primary-color”
   }
}

   The problem is that we can’t interpolate one variable to call another variable! $#{$color}  doesn’t actually work in Sass. It won’t interpolate into $ + primary-color , and then yield #111111  in the final CSS. This 3 year old github issue points out this exact issue, and hints at how maps is going to be introduced in Sass 3.3 to solve this problem. https://github.com/nex3/sass/issues/132

   Make it better with maps

   So now that we have maps, how can we create this color styleguide? Lets take this a step at a time.

   First we need to wrap all of our colors in a map. Remember, any of these colors can be accessed like this: map-get($site-colors, primary-color)

$site-colors: (
 primary-color: #111111,
 secondary-color: #222222,
 tertiary-color: #333333,
);

   Now we can create a list of the colors we want to iterate through and loop through them just like we did before.

$styleguide-colors: primary-color, secondary-color, tertiary-color;
@each $color in $styleguide-colors {
 .styleguide .#{$color} {
   background-color: map-get($site-colors, $color); // This DOES work!
   &:after {
     content: “variable name is #{$color}”
   }
 }
}

   This time when we loop through our colors we get the same class name and pseudo element content, but lets look at what happens with the background color. Here is the first pass through the loop, using primary-color as $color :

.styleguide .primary-color {
  background-color: map-get($site-colors, primary-color);
  &:after {
     content: “variable name is primary-color”
   }
}

   As you can see in this intermediate step, we are able to use map-get($site-colors, primary-color)  to programmatically pass our color name into a function, and get a returned value. Without maps we’d be stuck waiting for $#{$color} to be supported (which will probably never happen). Or in the case of my project, write all 20 site color classes out by hand!

   Make it awesomer with maps

   Astute readers might realize that I am still doing things the hard way. I created a map of colors, and then duplicated their names in a list called $styleguide-colors . We can skip that middle step and greatly simplify our code, if we are wanting to print out every single value in the map.

$site-colors: (
  primary-color: #111111,
  secondary-color: #222222,
  tertiary-color: #333333,
);
@each $color, $value in $site-colors  {
 .styleguide .#{$color} {
   background-color: $value;
   &:after {
     content: “variable name is #{$color}”
   }
 }
}

   Now, instead of passing a list into the @each loop, we pass the entire map. We can do this with the following pattern: @each $key, $value in $map . Each iteration of the loop has access to both the key primary-color  AND the value #111111 , so we don’t even need the map-get function. The ability to 'call variables with variables’ is incredibly useful for creating these programmatic classes, and is a foundational process upon which we start to build more complex systems. Be sure to check out part 1 and 2 of my Sass Maps blog series!