Incrementing color SCSS mixin

Recently, I built a small little responsive navigation thing for a challenge on Treehouse. I wanted links that had “incremented” or “stepped” colors from lighter to darker. Rather than figure out each color and place it one by one, I opted to build a small SCSS mixin to do the work for me.

@mixin bgColor($count, $color) {
  $loop_color: $color;
  @for $i from 0 through $count {
    $loop_color: shade($loop_color, 8%);
    &:nth-of-type(#{$i}) > a {
      background-color: $loop_color;
    }
  }
}


Let’s break it down real quick.

@mixin bgColor($count, $color)...


Line 1 opens up our @mixin and allows us to pass in two arguments. If you’re not familiar with mixins, you can read about them here.

$loop_color: $color;
@for $i from 0 through $count...


Line 2 sets a variable of $loop_color to the color you pass as an argument when calling this mixin (for use later in the mixin). Line 3 is the beginning of the meat of the mixin. We start a @for loop that says “for every number from 0 through $count” (where $count is what you pass as the first argument in the mixin), apply the following code.

$loop_color: shade($loop_color, 8%);


This is where the action gets hot. Every time line 4 is called, it “shades” the $loop_color variable by 8%. But since we’re in a @for loop, it shades the previously set color by 8%. This is where the “incremented” or “stepped” color is built.

&:nth-of-type(#{$i}) > a {
  background-color: $loop_color;
}


Lastly, we need to bind the resulting color of this run through the @for loop to something. In my case, I wanted to set the anchor link inside a list item. So, using the &:nth-of-type selector, you can bind the incremented number from the @for loop ($i) to the li:nth-of-type() selector by using #{$i}.

Using this syntax – #{} – will output the result of the @for loop into your CSS - perfect for automatically choosing the next list item. This is called interpolation.

The final piece of this line of code is setting the background-color to the resulting shaded color.

How to Use

Since I wanted to select the direct anchor of a list item (li:nth-of-type(n) > a), I used this mixin like so:

nav {
  li {
    @include bgColor(3, #BADA55);
  }
}


This is just selecting the list item and calling the mixin with my 2 arguments. In this case, I want to select 3 list items and incrementally shade the color #BADA55. This is the CSS output:

nav li:nth-of-type(1) > a {
  background-color: #9db847;
}

nav li:nth-of-type(2) > a {
  background-color: #90a941;
}

nav li:nth-of-type(3) > a {
  background-color: #849b3b;
}


There are many more uses for mixins like this – you just have to think of how to programatically step through what you would normally do manually. If you have any questions, comments or suggestions, please feel free to tweet me.