Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="blue">Blue</div>
<div class="red">Red</div>
<div class="green">Green</div>
<div class="indigo">Indigo</div>
<div class="teal">Teal</div>
<div class="yellow">Yellow</div>

<button class="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 {
  .#{$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

.blue-grey {
  background-color: #607d8b !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.gray {
  background-color: #9e9e9e !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.brown {
  background-color: #795548 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.deep-orange {
  background-color: #ff5722 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.orange {
  background-color: #ff9800 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.amber {
  background-color: #ffc107 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.yellow {
  background-color: #ffeb3b !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.lime {
  background-color: #cddc39 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.light-green {
  background-color: #8bc34a !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.green {
  background-color: #259b24 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.teal {
  background-color: #009688 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.cyan {
  background-color: #00bcd4 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.light-blue {
  background-color: #03a9f4 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.blue {
  background-color: #5677fc !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.indigo {
  background-color: #3f51b5 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.deep-purple {
  background-color: #673ab7 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.purple {
  background-color: #9c27b0 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.pink {
  background-color: #e91e63 !important;
  color: rgba(0, 0, 0, 0.47) !important;
}

.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="blue">Blue</div>
<div class="red">Red</div>
<div class="green">Green</div>
<div class="indigo">Indigo</div>
<div class="teal">Teal</div>
<div class="yellow">Yellow</div>

<button class="green">Call me hulk!</button>

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