Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>YELLOW?</h1>

<div class="cyan">Cyan</div>
<div class="magenta">Magenta</div>
<div class="yellow">Yellow</div>
<div class="key">Key</div>

SassMeister-input.scss

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

$colours: (
cyan: #00ffff,
magenta: #ff00ff,
yellow: #ffff00,
key: #000,
);

@function colour($name){
  @return map-get($colours, $name);
}

@each $name, $value in $colours {
	[class$="#{$name}"]{
		background-color: $value;
		color: #fff;
	}
}

h1 {
  background: colour(yellow);
  color: colour(magenta);
  border: 5px solid colour(cyan);
}

div {
  font-family: sans-serif;
  font-size: 2em;
  padding: 1em;
}

SassMeister-output.css

[class$="cyan"] {
  background-color: cyan;
  color: #fff;
}

[class$="magenta"] {
  background-color: magenta;
  color: #fff;
}

[class$="yellow"] {
  background-color: yellow;
  color: #fff;
}

[class$="key"] {
  background-color: black;
  color: #fff;
}

h1 {
  background: yellow;
  color: magenta;
  border: 5px solid cyan;
}

div {
  font-family: sans-serif;
  font-size: 2em;
  padding: 1em;
}

SassMeister-rendered.html

<h1>YELLOW?</h1>

<div class="cyan">Cyan</div>
<div class="magenta">Magenta</div>
<div class="yellow">Yellow</div>
<div class="key">Key</div>