Generated by SassMeister.com.

SassMeister-input.scss

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

// initial map
$colors: (
  'red': (
    'base': #f00
  ),
  'yellow' : (
    'base': #ff0
  )
);

// 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 Set
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

// debug map
@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);
                }
            }
        }
    }
}

// setting the color tints
@each $color, $color-val in $colors {
  // going by 10% color intervals for the tint here:
  @for $tint from 1 through 10 {
    $new-val: mix(white, map-deep-get($colors, $color, 'base'), $tint * 10%);
    
    // set map
    $colors: map-deep-set($colors, #{$color}, '#{$tint}', #{$new-val});
  }
}

@include debug-map($colors);

// color function
@function color($base-hue, $tone: 'base') {
   @return rgba(map-get(map-get($colors, $base-hue), $tone));
}

@each $color, $color-val in $colors {
  @for $tint from 1 through 10 {
    .#{$color}--tint--#{$tint} {
      content: 'color: ';
      color: color('red', '3');
    }
  }
}

SassMeister-output.css

@debug-map {
  __toString__: ("red": ("base": #f00, "tint--1": #ff1a1a, "tint--2": #ff3333, "tint--3": #ff4d4d, "tint--4": #ff6666, "tint--5": #ff8080, "tint--6": #ff9999, "tint--7": #ffb3b3, "tint--8": #ffcccc, "tint--9": #ffe6e6, "tint--10": white), "yellow": ("base": #ff0, "tint--1": #ffff1a, "tint--2": #ffff33, "tint--3": #ffff4d, "tint--4": #ffff66, "tint--5": #ffff80, "tint--6": #ffff99, "tint--7": #ffffb3, "tint--8": #ffffcc, "tint--9": #ffffe6, "tint--10": white));
  __length__: 2;
  __depth__: depth(("red": ("base": #f00, "tint--1": #ff1a1a, "tint--2": #ff3333, "tint--3": #ff4d4d, "tint--4": #ff6666, "tint--5": #ff8080, "tint--6": #ff9999, "tint--7": #ffb3b3, "tint--8": #ffcccc, "tint--9": #ffe6e6, "tint--10": white), "yellow": ("base": #ff0, "tint--1": #ffff1a, "tint--2": #ffff33, "tint--3": #ffff4d, "tint--4": #ffff66, "tint--5": #ffff80, "tint--6": #ffff99, "tint--7": #ffffb3, "tint--8": #ffffcc, "tint--9": #ffffe6, "tint--10": white)));
  __keys__: "red", "yellow";
  __properties__ {
    (map) red: ("base": #f00, "tint--1": #ff1a1a, "tint--2": #ff3333, "tint--3": #ff4d4d, "tint--4": #ff6666, "tint--5": #ff8080, "tint--6": #ff9999, "tint--7": #ffb3b3, "tint--8": #ffcccc, "tint--9": #ffe6e6, "tint--10": white);
    (map) yellow: ("base": #ff0, "tint--1": #ffff1a, "tint--2": #ffff33, "tint--3": #ffff4d, "tint--4": #ffff66, "tint--5": #ffff80, "tint--6": #ffff99, "tint--7": #ffffb3, "tint--8": #ffffcc, "tint--9": #ffffe6, "tint--10": white);
  }
}

.red--tint--1 {
  content: 'color: ';
  color: map;
}

.red--tint--2 {
  content: 'color: ';
  color: map;
}

.red--tint--3 {
  content: 'color: ';
  color: map;
}

.red--tint--4 {
  content: 'color: ';
  color: map;
}

.red--tint--5 {
  content: 'color: ';
  color: map;
}

.red--tint--6 {
  content: 'color: ';
  color: map;
}

.red--tint--7 {
  content: 'color: ';
  color: map;
}

.red--tint--8 {
  content: 'color: ';
  color: map;
}

.red--tint--9 {
  content: 'color: ';
  color: map;
}

.red--tint--10 {
  content: 'color: ';
  color: map;
}

.yellow--tint--1 {
  content: 'color: ';
  color: map;
}

.yellow--tint--2 {
  content: 'color: ';
  color: map;
}

.yellow--tint--3 {
  content: 'color: ';
  color: map;
}

.yellow--tint--4 {
  content: 'color: ';
  color: map;
}

.yellow--tint--5 {
  content: 'color: ';
  color: map;
}

.yellow--tint--6 {
  content: 'color: ';
  color: map;
}

.yellow--tint--7 {
  content: 'color: ';
  color: map;
}

.yellow--tint--8 {
  content: 'color: ';
  color: map;
}

.yellow--tint--9 {
  content: 'color: ';
  color: map;
}

.yellow--tint--10 {
  content: 'color: ';
  color: map;
}