Sass Generated Colorbar

colorbar.scss

// MARKUP EXAMPLE
// For styleguide use only
// <section class="colorbar-accent">
//   <div class="colorbar-range-25"></div>
//   <div class="colorbar-range-50"></div>
//   <div class="colorbar-range-75"></div>
//   <div class="colorbar-range-100"></div>
// </section>

%colorbar-props {
  float: left;
  height: 1em;
}

$colors: accent, black;

@each $color in $colors {
  .colorbar-#{$color} {
    margin-bottom: 1em;
    $i: 1;
    $range: 4; // Coincides with number of colors needed in bar
    @while $i <= $range {
      .colorbar-range-#{$i*(100/$range)} { // creates class name based on number of colors needed in bar
        @extend %colorbar-props;
        width: 100/$range*1%;
        background-color: darken(/*unquote("$")#{$color}*/$accent, $i * 5);   // error: "$accent" is not a color for `darken'
        //background-color: darken(unquote("$")$color, $i * 5);               // error: ($ accent) is not a color for `darken'
        //background-color: darken(unquote("$")#{$color}, $i * 5);            // error: "$accent" is not a color for `darken'
        $i: $i + 1;
      }
    }
  }
}