Cacher is the code snippet organizer for pro developers

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

$white: #fff;
$gray85: #d9d9d9;
$gray82: #d2d2d2;
$gray67: #ababab;
$gray59: #979797;
$black: #000;

// Brand colors
$red71: #f38075;
$blue27: #343456;
$green41: #2da269;

// 'Fun' colors
$orange75: #ffc07f;
$yellow85: #f5f3bb;
$yellow75: #fffd82;
$cyan65: #73D9C5;
$cyan29: #087e8b;
$green84: #cdeac0;
$green58: #81a684;
$blue72: #94b0da;
$purple74: #b0a3d4;
$red80: #eeabc4;

$palettes: (
    blue: (
        light: lighten($blue27, 10%),
        base: $blue27,
        dark: darken($blue27, 10%)
    ),
    red: (
        light: lighten($red71, 10%),
        base: $red71,
        dark: darken($red71, 10%)
    ),
    green: (
      light: lighten($green41, 10%),
      base: $green41,
      dark: darken($green41, 10%)
    ),
    white: (
        base: $white
    ),
    black: (
        base: $black
    ),
    gray: (
      x-light: $gray85,
      light: $gray82,
      base: $gray67,
      dark: $gray59
    ),
    accent: (
      yellow: $yellow75,
      golden: $yellow85,
      orange: $orange75,
      cyan: $cyan65,
      cyan-dark: $cyan29,
      green: $green84,
      green-dark: $green58,
      blue: $blue72,
      purple: $purple74,
      red: $red80
    )
);

@each $name, $color in map-get($palettes, accent) {
 .foo--#{$name} {
  background: $color;
 }
}

.foo--yellow {
  background: #fffd82;
}

.foo--golden {
  background: #f5f3bb;
}

.foo--orange {
  background: #ffc07f;
}

.foo--cyan {
  background: #73D9C5;
}

.foo--cyan-dark {
  background: #087e8b;
}

.foo--green {
  background: #cdeac0;
}

.foo--green-dark {
  background: #81a684;
}

.foo--blue {
  background: #94b0da;
}

.foo--purple {
  background: #b0a3d4;
}

.foo--red {
  background: #eeabc4;
}