Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

$blue: #33a9e0;
$blue-light: #e1f2fa;
$blue-dark: #0076ad;

$slate: #45454c;
$slate-light: #efeff4;
$slate-dark: #1e1e21;

$red: #cb4e52;
$red-light: #f7e2e2;
$red-dark: #9c292d;

$gold: #f3ae4e;
$gold-light: #fceddf;
$gold-dark: #c07b1b;

$purple: #6479bf;
$purple-light: #cbd6f4;
$purple-dark: #31468c;

$orange: #ed844a;
$orange-light: #f4d4c6;
$orange-dark: #ba5117;

$green: #45ad60;
$green-light: #c8edcd;
$green-dark: #127a2d;

$pink: #d37295;
$pink-light: #f2d1e3;
$pink-dark: #a03f62;

$brand-palettes: (blue: (base: $blue, light: $blue-light, dark: $blue-dark), slate: (base: $slate, light: $slate-light, dark: $slate-dark), red: (base: $red, light: $red-light, dark: $red-dark), gold: (base: $gold, light: $gold-light, dark: $gold-dark), purple: (base: $purple, light: $purple-light, dark: $purple-dark), orange: (base: $orange, light: $orange-light, dark: $orange-dark), green: (base: $green, light: $green-light, dark: $green-dark), pink: (base: $pink, light: $pink-light, dark: $pink-dark));

@each $palette in map-keys($brand-palettes) {
  @each $color, $i in map-get($brand-palettes, $palette) {
    @if $color == "base" {
      // This would normally be a silent class using %
      .background-#{$palette} {
        background-color: $i;
      }
      // This would normally be a silent class using %
      .color-#{$palette} {
        color: $i;
      }
    }
    @else {
      // This would normally be a silent class using %
      .background-#{$palette}-#{$color} {
        background-color: $i;
      }
      // This would normally be a silent class using %
      .color-#{$palette}-#{$color} {
        color: $i;
      }
    }
  }
}

SassMeister-output.css

.background-blue {
  background-color: #33a9e0;
}

.color-blue {
  color: #33a9e0;
}

.background-blue-light {
  background-color: #e1f2fa;
}

.color-blue-light {
  color: #e1f2fa;
}

.background-blue-dark {
  background-color: #0076ad;
}

.color-blue-dark {
  color: #0076ad;
}

.background-slate {
  background-color: #45454c;
}

.color-slate {
  color: #45454c;
}

.background-slate-light {
  background-color: #efeff4;
}

.color-slate-light {
  color: #efeff4;
}

.background-slate-dark {
  background-color: #1e1e21;
}

.color-slate-dark {
  color: #1e1e21;
}

.background-red {
  background-color: #cb4e52;
}

.color-red {
  color: #cb4e52;
}

.background-red-light {
  background-color: #f7e2e2;
}

.color-red-light {
  color: #f7e2e2;
}

.background-red-dark {
  background-color: #9c292d;
}

.color-red-dark {
  color: #9c292d;
}

.background-gold {
  background-color: #f3ae4e;
}

.color-gold {
  color: #f3ae4e;
}

.background-gold-light {
  background-color: #fceddf;
}

.color-gold-light {
  color: #fceddf;
}

.background-gold-dark {
  background-color: #c07b1b;
}

.color-gold-dark {
  color: #c07b1b;
}

.background-purple {
  background-color: #6479bf;
}

.color-purple {
  color: #6479bf;
}

.background-purple-light {
  background-color: #cbd6f4;
}

.color-purple-light {
  color: #cbd6f4;
}

.background-purple-dark {
  background-color: #31468c;
}

.color-purple-dark {
  color: #31468c;
}

.background-orange {
  background-color: #ed844a;
}

.color-orange {
  color: #ed844a;
}

.background-orange-light {
  background-color: #f4d4c6;
}

.color-orange-light {
  color: #f4d4c6;
}

.background-orange-dark {
  background-color: #ba5117;
}

.color-orange-dark {
  color: #ba5117;
}

.background-green {
  background-color: #45ad60;
}

.color-green {
  color: #45ad60;
}

.background-green-light {
  background-color: #c8edcd;
}

.color-green-light {
  color: #c8edcd;
}

.background-green-dark {
  background-color: #127a2d;
}

.color-green-dark {
  color: #127a2d;
}

.background-pink {
  background-color: #d37295;
}

.color-pink {
  color: #d37295;
}

.background-pink-light {
  background-color: #f2d1e3;
}

.color-pink-light {
  color: #f2d1e3;
}

.background-pink-dark {
  background-color: #a03f62;
}

.color-pink-dark {
  color: #a03f62;
}