Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

// HELPER FUNCTIONS

// Map Deep Set by Hugo Giraudel
// link: http://www.sitepoint.com/extra-map-functions-sass/
@function map-deep-set($map, $keys.../*, $value */) {
  $map-list: ($map,);
  $result: null;

  @if length($keys) == 2 {
    @return map-merge($map, (nth($keys, 1): nth($keys, -1)));
  }

  @for $i from 1 through length($keys) - 2 {
    $map-list: append($map-list, map-get(nth($map-list, -1), nth($keys, $i)));
  }

  @for $i from length($map-list) through 1 {
    $result: map-merge(nth($map-list, $i), (nth($keys, $i): if($i == length($map-list), nth($keys, -1), $result)));
  }

  @return $result;
}

// Hugo's Deep Get
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

// Hugo's Map Debug
// Use this debug to read the map even when you cant
// "see" it there because we're
// dynamically generating it
@mixin debug-map($map) {
    @at-root {
        @debug-map {
            __toString__: inspect($map);
            __length__: length($map);
            __depth__: depth($map);
            __keys__: map-keys($map);
            __properties__ {
                @each $key, $value in $map {
                    #{'(' + type-of($value) + ') ' + $key}: inspect($value);
                }
            }
        }
    }
}

// Base Color Map
$colors: (
  'red': (
    'base': #f00
  ),
  'yellow' : (
    'base': #ff0
  ),
  'green': (
    'base': #0f0
  )
);

// setting the color tints
@each $hue, $color-val in $colors {
  // going by 10% color intervals for the tint here:
  @for $val from 1 through 10 {
    // making a new tint and new shade for each value
    $new-tint: mix(white, map-deep-get($colors, $hue, 'base'), $val * 10%);
    $new-shade: mix(black, map-deep-get($colors, $hue, 'base'), $val * 10%);

    // set map with new values
    $colors: map-deep-set($colors, #{$hue}, 'tint-#{$val}', #{$new-tint});
    $colors: map-deep-set($colors, #{$hue}, 'shade-#{$val}', #{$new-shade});
  }
}

// Uncomment this if you want to see the map:
// @include debug-map($colors);

// Helper function to get colors from our nested map:
// You can access any color like this:
// color: color-me(red, tint-3);
// or background-color: rgba(color-me(blue, shade-2), 50%);
@function color-me($hue, $tint: 'base', $alpha: 1) {
   @return map-get(map-get($colors, #{$hue}), #{$tint});
}

// print out each color value
@each $hue, $color-val in $colors {
  @for $val from 1 through 10 {
    .#{$hue}--tint-#{$val} {
      color: color-me(#{$hue}, tint-#{$val});
    }

    .#{$hue}--shade-#{$val} {
      color: color-me(#{$hue}, shade-#{$val});
    }
  }
}

// and BAM! You just generated 30 colors programmatic ally that are accessed by a function color-me(hue, val)
// any of this can be optimized further, btw :)
// thanks for giving me a fun

SassMeister-output.css

.red--tint-1 {
  color: #ff1a1a;
}

.red--shade-1 {
  color: #e60000;
}

.red--tint-2 {
  color: #ff3333;
}

.red--shade-2 {
  color: #cc0000;
}

.red--tint-3 {
  color: #ff4d4d;
}

.red--shade-3 {
  color: #b30000;
}

.red--tint-4 {
  color: #ff6666;
}

.red--shade-4 {
  color: #990000;
}

.red--tint-5 {
  color: #ff8080;
}

.red--shade-5 {
  color: maroon;
}

.red--tint-6 {
  color: #ff9999;
}

.red--shade-6 {
  color: #660000;
}

.red--tint-7 {
  color: #ffb3b3;
}

.red--shade-7 {
  color: #4d0000;
}

.red--tint-8 {
  color: #ffcccc;
}

.red--shade-8 {
  color: #330000;
}

.red--tint-9 {
  color: #ffe6e6;
}

.red--shade-9 {
  color: #1a0000;
}

.red--tint-10 {
  color: white;
}

.red--shade-10 {
  color: black;
}

.yellow--tint-1 {
  color: #ffff1a;
}

.yellow--shade-1 {
  color: #e6e600;
}

.yellow--tint-2 {
  color: #ffff33;
}

.yellow--shade-2 {
  color: #cccc00;
}

.yellow--tint-3 {
  color: #ffff4d;
}

.yellow--shade-3 {
  color: #b3b300;
}

.yellow--tint-4 {
  color: #ffff66;
}

.yellow--shade-4 {
  color: #999900;
}

.yellow--tint-5 {
  color: #ffff80;
}

.yellow--shade-5 {
  color: olive;
}

.yellow--tint-6 {
  color: #ffff99;
}

.yellow--shade-6 {
  color: #666600;
}

.yellow--tint-7 {
  color: #ffffb3;
}

.yellow--shade-7 {
  color: #4d4d00;
}

.yellow--tint-8 {
  color: #ffffcc;
}

.yellow--shade-8 {
  color: #333300;
}

.yellow--tint-9 {
  color: #ffffe6;
}

.yellow--shade-9 {
  color: #1a1a00;
}

.yellow--tint-10 {
  color: white;
}

.yellow--shade-10 {
  color: black;
}

.green--tint-1 {
  color: #1aff1a;
}

.green--shade-1 {
  color: #00e600;
}

.green--tint-2 {
  color: #33ff33;
}

.green--shade-2 {
  color: #00cc00;
}

.green--tint-3 {
  color: #4dff4d;
}

.green--shade-3 {
  color: #00b300;
}

.green--tint-4 {
  color: #66ff66;
}

.green--shade-4 {
  color: #009900;
}

.green--tint-5 {
  color: #80ff80;
}

.green--shade-5 {
  color: green;
}

.green--tint-6 {
  color: #99ff99;
}

.green--shade-6 {
  color: #006600;
}

.green--tint-7 {
  color: #b3ffb3;
}

.green--shade-7 {
  color: #004d00;
}

.green--tint-8 {
  color: #ccffcc;
}

.green--shade-8 {
  color: #003300;
}

.green--tint-9 {
  color: #e6ffe6;
}

.green--shade-9 {
  color: #001a00;
}

.green--tint-10 {
  color: white;
}

.green--shade-10 {
  color: black;
}