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;
}

// 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
    $color-set: map-deep-set($colors, #{$color}, #{$tint}, $new-val);
    
    // just for show that you're making these values:
    .#{$color}--tint--#{$tint} {
      #{$color}--#{$tint}: '#{$new-val}';
    }
  }
}

SassMeister-output.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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