Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="a">
 <li class="a-8"></li>
 <li class="a-7"></li>
 <li class="a-6"></li>
 <li class="a-5"></li>
 <li class="a-4"></li>
 <li class="a-3"></li>
 <li class="a-2"></li>
 <li class="a-1"></li>
 <li class="a0"></li>
 <li class="a1"></li>
 <li class="a2"></li>
 <li class="a3"></li>
 <li class="a4"></li>
 <li class="a5"></li>
 <li class="a6"></li>
 <li class="a7"></li>
 <li class="a8"></li>
</ul>



<ul class="b">
 <li class="b-8"></li>
 <li class="b-7"></li>
 <li class="b-6"></li>
 <li class="b-5"></li>
 <li class="b-4"></li>
 <li class="b-3"></li>
 <li class="b-2"></li>
 <li class="b-1"></li>
 <li class="b0"></li>
 <li class="b1"></li>
 <li class="b2"></li>
 <li class="b3"></li>
 <li class="b4"></li>
 <li class="b5"></li>
 <li class="b6"></li>
 <li class="b7"></li>
 <li class="b8"></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v)
// ----

@import "compass";
$colors: (
 a: #585555,
 b: (
  0: #585555
 ),
 c: (
  -2: #585555,
  0: #585555,
  2: #585555
 ),
 d: 2,
 e: (
  0: #c82754,
  2: "broken"
 )
);

$colors-with-words: (
 primary: #585555,
 secondary: (
  0: #585555
 ),
 tertiary: (
  -2: #585555,
  0: #585555,
  2: #585555
 ),
);

$color-functions: (
 light: (
  lighten: 5%,
  tint: 5%
 ),
 dark: (
  darken: 5%,
  shade: 5%
 )
);

@function color($color, $variation: 0, $color-map: $colors, $smart-color: true){
 @if type-of($color-map) != map{
  @warn "#{$color-map} is not a sass data map";
 }
 $v: $variation; // @note { this is here to make the if statements below shorter an more readable. }
 $color-set: map-get($color-map, $color);
 $color-set-type: color_type-of($color-set);
 $base-color: call("color_is-#{$color-set-type}", $color-set, 0); // @note { this is set to 0 instead of $variation beause that is the base identifier }
 
 @if type-of($base-color) != color or $v == 0{
  @return $base-color; // @note { if the type of $base-color isn't a color this will return a warning message and error message in the css }
 }
 $result: if($color-set-type == map, call(color_is-map, $color-set, $v), null); // @note { if there is a user defined variation it will return this variation }
 $result: if($result == null, call(color-variation, $base-color, $v), $result); // @note { if there isn't a user defined variation then the dynamic color variation is created }
 @if $smart-color == true{ // @note { only if smart color is true else this gets skipped }
  @if $result == white or $result == black{
   $result: call(color, $color, if($v < 0, $v + 1, $v - 1), $color-map, $smart-color);
  }
 }
 
 @return if(type-of($result) != color, $result unquote("/* @errror { #{type-of($result)} isn't a color } */"), $result);
}


// color-variation
// @note { This gets called if the user didn't define a variation for that color set }
// ----------------------------------------
 @function color-variation($base-color, $variation: 3, $functions: $color-functions){
  $function-set: if($variation < 0, map-get($functions, light), map-get($functions, dark)); // @note { this determins wether or not to use the light or dark function set }
  $length: length($function-set); // @note { length of the light or dark functions }
  $color: null; // @note { placeholder for the new colors created by the color functions }
  @for $i from $length through 1{ 
   // @note { 
   //  Reverse for loop so you can wrap the color functions correctly in reverse order.
   //  Where the last function in the map is the first function to get called.
   //  Example: (lighten: 5%, tint: 5%) ==> lighten(tint([base color], 5%), 5%);
   // }
   $function: nth(map-keys($function-set), $i); // @note { gets the color function name from $function-set }
   $args: map-get($function-set, $function); // @note { gets the arguments for the function }
   $color: call($function, if($i == $length, $base-color, $color), increment($variation, $args));
  }
  @return $color;
 }

// increment
// @note { This function is used to increment the number by the abs($variation). }
// ----------------------------------------
 @function increment($variation, $increment){
  $options: (start: 0, increment: 5%); // @note { $options are the default options and will be used if not overwritten }
  @if type-of($increment) != map{
   $options: map-merge($options, (increment: $increment)); // @note { If the user doesn't passes $increment as a map it will create one for them and merge it with options }
  }@else{
   @each $key, $value in $options{
    @if map-has-key($increment, $key){
     $options: map-merge($options, ($key: map-get($increment, $key)));
    }
   }
  }
  $result: map-get($options, start);
  @for $i from 1 through abs($variation){
   $result: $result + map-get($options, increment);
  }
  @if $result < 0{
   @warn "The $result is less than 0. If you are using a negative an increment make sure the start value is 100%";
  }
  @return $result;
 }

// color_type-of
// @note {if color_type-of($color-set) is not a color, string, or map it will be set to na which is not applicable. }
// ---------------------------------------- 
 @function color_type-of($a){
  $b: type-of($a);
  @return if($b == color or $b == string or $b == map, $b, na);
 }

// is-color
// ---------------------------------------- 
 @function color_is-color($color-set, $variation){
  @return $color-set;
 }

// is-map
// ----------------------------------------
 @function color_is-map($color-set, $variation){
  $color: map-get($color-set, $variation); // @note { checks to see if the color variation exists in the user defined color map }
  @return if($color != null, if(type-of($color) == string, call(color_is-string, $color, $variation), $color), call(color_is-color, $color, $variation));
 }

// is-string
// ----------------------------------------
 @function color_is-string($color-set, $variation){
  $color: null;
  @if type-of($color-set) == string{
   $color: unquote($color-set);
   @if $color == color{
    $color: call(color_is-color, $result, $variation);
   }@else{
    @warn "#{$color} isn't a color";
    $color: quote($color) unquote("/* @error { this string isn't a color value } */");
   }
  }
  @return $color;
 }

// is not applicable
// ----------------------------------------
 @function color_is-na($color-set, $variation){
  @warn "#{$color-set} is not a color";
  $message: if($variation == 0, "isn't a base color", "isn't a color");
  @return inspect($color-set unquote("/* @error { a #{type-of($color-set)} #{$message} */"));
 }

/* tests 
==================================================*/
.color-function-test-with-letters{
 /* single value - light, base, dark */ 
 a-color-function: color(a, -2), color(a, 0), color(a, 2);
 /* map value - should be the same colors as above */ 
 b-color-function: color(b, -2), color(b, 0), color(b, 2);
 /* predefined variations - expected #585555, #585555, #585555 */ 
 c-color-function: color(c, -2), color(c, 0), color(c, 2);
}

.color-function-test-with-words{
 /* single value - light, base, dark */ 
 a-color-function: color(primary, -2, $colors-with-words), color(primary, 0, $colors-with-words), color(primary, 2, $colors-with-words);
 /* map value - should be the same colors as above */ 
 b-color-function: color(secondary, -2, $colors-with-words), color(secondary, 0, $colors-with-words), color(secondary, 2, $colors-with-words);
 /* predefined variations - expected #585555, #585555, #585555 */ 
 c-color-function: color(tertiary, -2, $colors-with-words), color(tertiary, 0, $colors-with-words), color(tertiary, 2, $colors-with-words);
}


.color-function-smart-color-test{
 /* expected values - #eaeaea, #585555, #010101 */
 smart-color_true: color(a, -20), color(a, 0), color(a, 20);
 /* expected values - white, #585555, black */
 smart-color_false: color(a, -20, $smart-color: false), color(a, 0, $smart-color: false), color(a, 20, $smart-color: false);
}

.color-function-tests-with-expected-errors{
 /* single value that isn't a color - expecting a error message */ 
 d-color-function: color(d, -2), color(d, 0), color(d, 2);
 /* predefined variation that isn't a color - expecting 2 colors and a error message */ 
 e-color-function: color(e, -2), color(e, 0), color(e, 2);
}


/* 


styles for presentation purposes only 
==================================================*/

body{ color: color(a, 0); font: 16px/1.45em Arial; }
@mixin color-list($color, $total-variations, $recursive: true, $sc: true){
 $v: if($recursive == true, -$total-variations, $total-variations);
 @extend %color-list;
 @for $i from if($v < 0, $v, 0) through if($v < 0, -1, $v){
  &#{$i}{
   background: color($color, $i, $smart-color: $sc);
   &:before{ content: "#{$color}: " + $i; }
   &:after{ content: "#{color($color, $i, $smart-color: $sc)}"; }
  }
 }
 @if $v < 0{
  @include color-list($color, $total-variations, false, $sc);
 }
}

.a{
 @include color-list(a, 8);
}
.b{
 @include color-list(e, 8);
}

%color-list{
 $_color-list-size: 100px;
 display: block;
 margin: 0;
 padding: 0;
 width: 100%;
 &:after{
  content: "";
  clear: both;
  display: table;
 }
 li{
  display: block;
  height: $_color-list-size;
  float: left;
  margin: 20px 10px 15px;
  padding: 0;
  position: relative;
  @include transition(all .25s ease-in-out);
  width: $_color-list-size;
  &:hover{
   @include transform(scale(1.27));
   box-shadow: 0 0 0 5px #fff;
  }
  &:before, &:after{
   font-size: 12px;
   position: absolute;
   left: 50%;
   line-height: 1em;
   margin-left: -($_color-list-size / 2);
   text-align: center;
   top: -2em;
   width: $_color-list-size;
  }
  &:after{
   color: #fff;
   margin-top: -.5em;
   top: 50%;
   text-shadow: 0 0 .5em rgba(#000, .5);
  }
 }
}

SassMeister-output.css

/* tests 
==================================================*/
.color-function-test-with-letters {
  /* single value - light, base, dark */
  a-color-function: #827f7f, #585555, #353333;
  /* map value - should be the same colors as above */
  b-color-function: #827f7f, #585555, #353333;
  /* predefined variations - expected #585555, #585555, #585555 */
  c-color-function: #585555, #585555, #585555;
}

.color-function-test-with-words {
  /* single value - light, base, dark */
  a-color-function: #827f7f, #585555, #353333;
  /* map value - should be the same colors as above */
  b-color-function: #827f7f, #585555, #353333;
  /* predefined variations - expected #585555, #585555, #585555 */
  c-color-function: #585555, #585555, #585555;
}

.color-function-smart-color-test {
  /* expected values - #eaeaea, #585555, #010101 */
  smart-color_true: #eaeaea, #585555, #010101;
  /* expected values - white, #585555, black */
  smart-color_false: white, #585555, black;
}

.color-function-tests-with-expected-errors {
  /* single value that isn't a color - expecting a error message */
  d-color-function: 2 /* @error { a number isn't a base color */, 2 /* @error { a number isn't a base color */, 2 /* @error { a number isn't a base color */;
  /* predefined variation that isn't a color - expecting 2 colors and a error message */
  e-color-function: #d76585, #c82754, "broken" /* @error { this string isn't a color value } */ /* @errror { list isn't a color } */;
}

/* 


styles for presentation purposes only 
==================================================*/
body {
  color: #585555;
  font: 16px/1.45em Arial;
}

.a-8 {
  background: #eaeaea;
}
.a-8:before {
  content: "a: -8";
}
.a-8:after {
  content: "#eaeaea";
}
.a-7 {
  background: #eaeaea;
}
.a-7:before {
  content: "a: -7";
}
.a-7:after {
  content: "#eaeaea";
}
.a-6 {
  background: #d6d5d5;
}
.a-6:before {
  content: "a: -6";
}
.a-6:after {
  content: "#d6d5d5";
}
.a-5 {
  background: #c0bfbf;
}
.a-5:before {
  content: "a: -5";
}
.a-5:after {
  content: "#c0bfbf";
}
.a-4 {
  background: #acaaaa;
}
.a-4:before {
  content: "a: -4";
}
.a-4:after {
  content: "#acaaaa";
}
.a-3 {
  background: #979494;
}
.a-3:before {
  content: "a: -3";
}
.a-3:after {
  content: "#979494";
}
.a-2 {
  background: #827f7f;
}
.a-2:before {
  content: "a: -2";
}
.a-2:after {
  content: "#827f7f";
}
.a-1 {
  background: #6d6a6a;
}
.a-1:before {
  content: "a: -1";
}
.a-1:after {
  content: "#6d6a6a";
}
.a0 {
  background: #585555;
}
.a0:before {
  content: "a: 0";
}
.a0:after {
  content: "#585555";
}
.a1 {
  background: #464343;
}
.a1:before {
  content: "a: 1";
}
.a1:after {
  content: "#464343";
}
.a2 {
  background: #353333;
}
.a2:before {
  content: "a: 2";
}
.a2:after {
  content: "#353333";
}
.a3 {
  background: #232222;
}
.a3:before {
  content: "a: 3";
}
.a3:after {
  content: "#232222";
}
.a4 {
  background: #121212;
}
.a4:before {
  content: "a: 4";
}
.a4:after {
  content: "#121212";
}
.a5 {
  background: #010101;
}
.a5:before {
  content: "a: 5";
}
.a5:after {
  content: "#010101";
}
.a6 {
  background: #010101;
}
.a6:before {
  content: "a: 6";
}
.a6:after {
  content: "#010101";
}
.a7 {
  background: #010101;
}
.a7:before {
  content: "a: 7";
}
.a7:after {
  content: "#010101";
}
.a8 {
  background: #010101;
}
.a8:before {
  content: "a: 8";
}
.a8:after {
  content: "#010101";
}

.b-8 {
  background: #f7e1e7;
}
.b-8:before {
  content: "e: -8";
}
.b-8:after {
  content: "#f7e1e7";
}
.b-7 {
  background: #f7e1e7;
}
.b-7:before {
  content: "e: -7";
}
.b-7:after {
  content: "#f7e1e7";
}
.b-6 {
  background: #f7e1e7;
}
.b-6:before {
  content: "e: -6";
}
.b-6:after {
  content: "#f7e1e7";
}
.b-5 {
  background: #efc2cf;
}
.b-5:before {
  content: "e: -5";
}
.b-5:after {
  content: "#efc2cf";
}
.b-4 {
  background: #e8a3b6;
}
.b-4:before {
  content: "e: -4";
}
.b-4:after {
  content: "#e8a3b6";
}
.b-3 {
  background: #e0849d;
}
.b-3:before {
  content: "e: -3";
}
.b-3:after {
  content: "#e0849d";
}
.b-2 {
  background: #d76585;
}
.b-2:before {
  content: "e: -2";
}
.b-2:after {
  content: "#d76585";
}
.b-1 {
  background: #d1436b;
}
.b-1:before {
  content: "e: -1";
}
.b-1:after {
  content: "#d1436b";
}
.b0 {
  background: #c82754;
}
.b0:before {
  content: "e: 0";
}
.b0:after {
  content: "#c82754";
}
.b1 {
  background: #a92146;
}
.b1:before {
  content: "e: 1";
}
.b1:after {
  content: "#a92146";
}
.b2 {
  background: "broken" /* @error { this string isn't a color value } */ /* @errror { list isn't a color } */;
}
.b2:before {
  content: "e: 2";
}
.b2:after {
  content: "\"broken\" /* @error { this string isn't a color value } */ /* @errror { list isn't a color } */";
}
.b3 {
  background: #6a152c;
}
.b3:before {
  content: "e: 3";
}
.b3:after {
  content: "#6a152c";
}
.b4 {
  background: #4b0e1f;
}
.b4:before {
  content: "e: 4";
}
.b4:after {
  content: "#4b0e1f";
}
.b5 {
  background: #2b0812;
}
.b5:before {
  content: "e: 5";
}
.b5:after {
  content: "#2b0812";
}
.b6 {
  background: #0c0205;
}
.b6:before {
  content: "e: 6";
}
.b6:after {
  content: "#0c0205";
}
.b7 {
  background: #0c0205;
}
.b7:before {
  content: "e: 7";
}
.b7:after {
  content: "#0c0205";
}
.b8 {
  background: #0c0205;
}
.b8:before {
  content: "e: 8";
}
.b8:after {
  content: "#0c0205";
}

.a, .b {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
.a:after, .b:after {
  content: "";
  clear: both;
  display: table;
}
.a li, .b li {
  display: block;
  height: 100px;
  float: left;
  margin: 20px 10px 15px;
  padding: 0;
  position: relative;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  width: 100px;
}
.a li:hover, .b li:hover {
  -moz-transform: scale(1.27);
  -ms-transform: scale(1.27);
  -webkit-transform: scale(1.27);
  transform: scale(1.27);
  box-shadow: 0 0 0 5px #fff;
}
.a li:before, .b li:before, .a li:after, .b li:after {
  font-size: 12px;
  position: absolute;
  left: 50%;
  line-height: 1em;
  margin-left: -50px;
  text-align: center;
  top: -2em;
  width: 100px;
}
.a li:after, .b li:after {
  color: #fff;
  margin-top: -.5em;
  top: 50%;
  text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}

SassMeister-rendered.html

<ul class="a">
 <li class="a-8"></li>
 <li class="a-7"></li>
 <li class="a-6"></li>
 <li class="a-5"></li>
 <li class="a-4"></li>
 <li class="a-3"></li>
 <li class="a-2"></li>
 <li class="a-1"></li>
 <li class="a0"></li>
 <li class="a1"></li>
 <li class="a2"></li>
 <li class="a3"></li>
 <li class="a4"></li>
 <li class="a5"></li>
 <li class="a6"></li>
 <li class="a7"></li>
 <li class="a8"></li>
</ul>



<ul class="b">
 <li class="b-8"></li>
 <li class="b-7"></li>
 <li class="b-6"></li>
 <li class="b-5"></li>
 <li class="b-4"></li>
 <li class="b-3"></li>
 <li class="b-2"></li>
 <li class="b-1"></li>
 <li class="b0"></li>
 <li class="b1"></li>
 <li class="b2"></li>
 <li class="b3"></li>
 <li class="b4"></li>
 <li class="b5"></li>
 <li class="b6"></li>
 <li class="b7"></li>
 <li class="b8"></li>
</ul>