SASS - Loop through array to create class sets.

loop.scss

//Set Variables
$button-white:          #ffffff;
$button-green:          #44ca00;
$button-green-dark:     #369a12;
$button-blue:           #a6d1f9;
$button-blue-dark:      #14283e;
$button-gray:           #eeeeee;
$button-red:            #9e0b0f;

//Create Array
$button-colors:  (green $button-green white,
                  darkgreen $button-green-dark white,
                  blue $button-blue white,
                  darkblue $button-blue-dark white,
                  gray $button-gray #999,
                  red $button-red white
                 );

//Each loop to create classes
.button {
  @each $type in $button-colors {
    &.#{nth($type, 1)} {
      background-color: #{nth($type, 2)};
      color: #{nth($type, 3)};
      &:hover {
        background-color: darken(nth($type, 2), 5%);
      }
    }
  }
}

I received this error code, from line 22.

Syntax error: Invalid CSS after "&.": expected class name, was "#006400"

@maxbailey are you running the latest version of sass? works for me, check out this pen: http://codepen.io/ntassone/pen/dslvt