Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="box___blue">Blue</div>
<div class="box___red">Red</div>
<div class="box___green">Green</div>
<div class="box___indigo">Indigo</div>
<div class="box___teal">Teal</div>
<div class="box___yellow">Yellow</div>

<button class="make-me___green">Call me hulk!</button>

<h1 class="___light-blue">I want to be blue, light blue!</h1>

SassMeister-input.scss

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

$colours: (
  blue-grey: #607d8b,
  grey: #9e9e9e,
  brown: #795548,
  deep-orange: #ff5722,
  orange: #ff9800,
  amber: #ffc107,
  yellow: #ffeb3b,
  lime: #cddc39,
  light-green: #8bc34a,
  green: #259b24,
  teal: #009688,
  cyan: #00bcd4,
  light-blue: #03a9f4,
  blue: #5677fc,
  indigo: #3f51b5,
  deep-purple: #673ab7,
  purple: #9c27b0,
  pink: #e91e63,
  red: #e51c23
);

@each $name, $value in $colours {
  [class$="___#{$name}"]{
    background-color: $value !important;
    color: rgba(0,0,0, .47) !important;
  }
}

body {
  font-family: sans-serif;
  font-size: 2em;
}

div {
  padding: 1em;
}

SassMeister-output.css

[class$="___blue-grey"] {
  background-color: #607d8b !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___gray"] {
  background-color: #9e9e9e !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___brown"] {
  background-color: #795548 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___deep-orange"] {
  background-color: #ff5722 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___orange"] {
  background-color: #ff9800 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___amber"] {
  background-color: #ffc107 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___yellow"] {
  background-color: #ffeb3b !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___lime"] {
  background-color: #cddc39 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___light-green"] {
  background-color: #8bc34a !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___green"] {
  background-color: #259b24 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___teal"] {
  background-color: #009688 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___cyan"] {
  background-color: #00bcd4 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___light-blue"] {
  background-color: #03a9f4 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___blue"] {
  background-color: #5677fc !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___indigo"] {
  background-color: #3f51b5 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___deep-purple"] {
  background-color: #673ab7 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___purple"] {
  background-color: #9c27b0 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___pink"] {
  background-color: #e91e63 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

[class$="___red"] {
  background-color: #e51c23 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

body {
  font-family: sans-serif;
  font-size: 2em;
}

div {
  padding: 1em;
}

SassMeister-rendered.html

<div class="box___blue">Blue</div>
<div class="box___red">Red</div>
<div class="box___green">Green</div>
<div class="box___indigo">Indigo</div>
<div class="box___teal">Teal</div>
<div class="box___yellow">Yellow</div>

<button class="make-me___green">Call me hulk!</button>

<h1 class="___light-blue">I want to be blue, light blue!</h1>