WIP dynamic color pallete gen

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$colors: (
  'red': #c00,
  'orange': #f50,
  'yellow': #ff0
);

@function color($name) {
  @return map-get($colors, $name);
}

// mixes white with 10% of the the color
@function light-mix($color, $percent: 10%) {
  @return mix($color, white, $percent)
}

// mixes white with 10% of the the color
@function dark-mix($color, $percent: 10%) {
  @return mix($color, black, $percent)
}

$color-pallete: ();

@mixin make-pallete($num: 3) {
  @each $color in $colors {
    $hex: map-get($colors, $color);
    @for $i from 1 through $num {
      .item-#{$i} { color: $color }
    }
  }
}

.test {
  background: color('red');
  color: light-mix(color('red'));
}

@include make-pallete(3);

SassMeister-output.css

.test {
  background: #c00;
  color: #f9e5e5;
}

.item-1 {
  color: "red" #c00;
}

.item-2 {
  color: "red" #c00;
}

.item-3 {
  color: "red" #c00;
}

.item-1 {
  color: "orange" #f50;
}

.item-2 {
  color: "orange" #f50;
}

.item-3 {
  color: "orange" #f50;
}

.item-1 {
  color: "yellow" #ff0;
}

.item-2 {
  color: "yellow" #ff0;
}

.item-3 {
  color: "yellow" #ff0;
}