Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>

SassMeister-input.scss

// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----

@import "compass/utilities/color";

$colors: (
  "red": tomato,
  "orange": orange,
  "blue": lightblue,
  "green": lime,
  "pink": hotpink
);

$brand-colors: (
  "brand-color": map-get($colors, "red"),
  "bg-color": map-get($colors, "orange"),
  "link-color": map-get($colors, "blue"),
  "text-color": map-get($colors, "green"),
  "meta-color": map-get($colors, "pink")
);

$i: 1;

@each $color-name, $color in $brand-colors {
  div:nth-child(#{$i}) {
    padding: 5px 10px;
    margin-bottom: 8px;
    font-size: 20px;
    background: $color;
    &:before {
      content: "#{$color-name}";
      color: contrast-color($color);
    }
  }
  $i: $i+1;
}

SassMeister-output.css

div:nth-child(1) {
  padding: 5px 10px;
  margin-bottom: 8px;
  font-size: 20px;
  background: tomato;
}
div:nth-child(1):before {
  content: "brand-color";
  color: black;
}

div:nth-child(2) {
  padding: 5px 10px;
  margin-bottom: 8px;
  font-size: 20px;
  background: orange;
}
div:nth-child(2):before {
  content: "bg-color";
  color: black;
}

div:nth-child(3) {
  padding: 5px 10px;
  margin-bottom: 8px;
  font-size: 20px;
  background: lightblue;
}
div:nth-child(3):before {
  content: "link-color";
  color: black;
}

div:nth-child(4) {
  padding: 5px 10px;
  margin-bottom: 8px;
  font-size: 20px;
  background: lime;
}
div:nth-child(4):before {
  content: "text-color";
  color: black;
}

div:nth-child(5) {
  padding: 5px 10px;
  margin-bottom: 8px;
  font-size: 20px;
  background: hotpink;
}
div:nth-child(5):before {
  content: "meta-color";
  color: black;
}

SassMeister-rendered.html

<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>