Cacher is the code snippet organizer for pro developers

.cs-blue,
.cs-a {
  background-color: #0000FF;
  color: #000;
}

.cs-red--base,
.cs-b--a {
  background-color: #FF0000;
  color: #000;
}

.cs-red--light,
.cs-b--b {
  background-color: #EEEEFF;
  color: #000;
}

.cs-red--dark,
.cs-b--c {
  background-color: #5555FF;
  color: #000;
}

.cs-a {
  background-color: #000;
  color: #FFF;
  font-size: 20px;
}

.cs-b {
  background-color: #EEEEFF;
  color: #000;
  font-size: 20px;
}

.cs-c {
  background-color: #5555FF;
  color: #000;
  font-size: 20px;
}

.cs-a {
  background-color: #000;
  color: #EFEFEF;
}

.cs-b {
  background-color: #EEEEFF;
  color: #333;
}

.cs-c {
  background-color: #5555FF;
  color: #333;
}

.color {
  color: #000;
  background-color: #5555FF;
}

// ----
// libsass (v3.2.5)
// ----

// list for class names
$alpha: a b c d e f g h i j k l m n o p q r s t u v w x y z;
// Color Map
$colors: (
  blue: #0000FF,
  red: (
    base: #FF0000,
    light: #EEEEFF,
    dark: #5555FF
  )
);

// Color Scheme
$color-scheme: (
  cs-a: #000, // 1. color
  cs-b: (red: light), // 2. key: value to represent color-map
  cs-c: map-get(map-get($colors, red), dark) // 3. actual nested map-get
  // 4 is auto scheme
);

// Color Function
@function get-color( $color, $shade: 'base', $map : $colors ){
  // check color exists
  @if (map-has-key($map, $color)) {
    $value: map-get($map, unquote($color));
    // check if color or map
    @if type-of($value) == color {
      // return color
      @return $value;
    }
    // check shade of color exists
    @if (map-has-key($value, $shade)) {
      // return shade of color
      @return map-get($value, $shade);
    }
  } 
  // else do nothing
  @return null;
}

// contrasting font color
@function set-font-color($color, $dark: #000, $light: #FFF) {
  // return $dark or $light color depending on lightness of $color
  @return if(lightness($color) > 50, $dark, $light); 
}

@mixin auto-scheme-do( $map: $colors, $dark: #000, $light: #FFF) {
  @each $name, $color in $map {
    $i: index( map-keys($map), $name);
    @if (type-of($color) == color ) {
      .cs-#{unquote($name)},
      .cs-#{nth($alpha, $i)}{
        background-color: $color;
        color: set-font-color($color, $dark, $light);
        @content
      } 
    } @else {
      @each $shade, $value in $color {
        $x: index(map-keys($color), $shade);
        .cs-#{unquote($name)}--#{unquote($shade)},
        .cs-#{nth($alpha, $i)}--#{nth($alpha, $x)}
        {
          background-color: $value;
          color: set-font-color($value, $dark, $light);
          @content
        }    
      }
    }
  }
}
@include auto-scheme-do();






@mixin scheme-do( $map: $color-scheme, $dark: #000, $light: #FFF ) {
    @each $scheme, $color in $map {
        .#{unquote($scheme)} {
            background-color: if(type-of($color) == color, $color, get-color(nth(map-keys($color), 1),nth(map-values($color), 1)));
            color: set-font-color(if(type-of($color) == color, $color, get-color(nth(map-keys($color), 1),nth(map-values($color), 1))), $dark, $light);
            @content
        }
    }
}
@include scheme-do($color-scheme){ font-size: 20px;  };
@include scheme-do($color-scheme, #333, #EFEFEF);



.color {
  color: set-font-color(get-color(blue));
  background-color: get-color(red, dark);
  border-top-color: get-color(pink); // no color so null
  border-bottom-color: get-color(red, darker); // no shade in map so null
  border-right-color: get-color(green, dark); // not a map so returns color
}