Generated by SassMeister.com.

SassMeister-input.scss

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

$black: #000;
$white: #fff;

// Base Colors Variations Map
$tint-shade-perc: 80%;
$light-dark-perc: 5%;
$variations: (
light: (
   function: lighten,
   parameter: $light-dark-perc),
dark: (
   function: darken,
   parameters: $light-dark-perc),
tint: (
   function: mix,
   parameters: $black $tint-shade-perc),
shade: (
   function: mix,
   parameters: $white $tint-shade-perc),
fade-in: (// opacify
   function: fade-in,
   parameters: 0.07%),
fade-out: (// transparentize
   function: fade-out,
   parameters: 0.07%),
saturate: (
   function: saturate,
   parameters: $light-dark-perc),
desaturate: (
   function: desaturate,
   parameters: $light-dark-perc),
adjust-hue: (
   function: adjust-hue,
   parameters: $light-dark-perc),
gray: (function: grayscale),
complement: (function: complement),
lightness: (function: lightness),
hue: (function: hue),
saturation: (function: saturation),
invert: (function: invert),
);

// Get color we want
@function color-variation($color, $variation: false) {
  // validate the color value
  @if map-has-key($colors, $color) {
    $color: map-get($colors, $color);
  } @else {
    // To force devs to stick to color map, remove this following if
    @if type-of($color) != color { @error "Invalid color name: `#{$color}`."; }
  }

  // validate variation name
  @if $variation {
    @if not map-has-key($variations, $variation) {
      @error "Invalid $variation: `#{$variation}`.";
    } @else {
      // changing the color
      $this-variation: map-get($variations, $variation);
      $args: join(map-get($this-variation, function), $color);
      @if map-get($this-variation, parameters) {
        $args: join($args, map-get($this-variation, parameters));
      }
      @return call($args...);
    }
  }
  @return $color;
}

// alias for color-variation
@function cv($color, $variation: false) {
  @return color-variation($color, $variation);
}

$green: #8ec73F;
$blue: #316b8a;
$yellow: #d9c245;

.primary {
  color: $green;
}
.secondary-1 {
  color: $blue;
}

.secondary-2 {
  color: $yellow;
}

// .color-primary-0 { color: #8EC73F }	// Main Primary color
// .color-primary-1 { color: #C9F094 }
// .color-primary-2 { color: #AEE366 }
// .color-primary-3 { color: #71AC20 }
// .color-primary-4 { color: #54890B }

// .color-secondary-1-0 { color: #316B8A }	// Main Secondary color (1)
// .color-secondary-1-1 { color: #7AA8C0 }
// .color-secondary-1-2 { color: #4B819E }
// .color-secondary-1-3 { color: #1B5777 }
// .color-secondary-1-4 { color: #0C425F }

// .color-secondary-2-0 { color: #D9C245 }	// Main Secondary color (2)
// .color-secondary-2-1 { color: #FFF09D }
// .color-secondary-2-2 { color: #F8E36F }
// .color-secondary-2-3 { color: #BCA423 }
// .color-secondary-2-4 { color: #96800C }

SassMeister-output.css

.primary {
  color: #8ec73F;
}

.secondary-1 {
  color: #316b8a;
}

.secondary-2 {
  color: #d9c245;
}