Generated by SassMeister.com.

SassMeister-input-HTML.html

<!-- @una made this -->

<ul class="color-list">
    <li class="color-box brick-red"></li>
    <li class="color-box strawberry"></li>
    <li class="color-box deep-orange"></li>
    <li class="color-box tangerine"></li>
    <li class="color-box gold"></li>
    <li class="color-box sunshine"></li>
    <li class="color-box grass-green"></li>
    <li class="color-box lime"></li>
    <li class="color-box funky-purple"></li>
    <li class="color-box clay"></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

body {
  font-family: Verdana, sans-serif;
}

//COMPASS SETUP
@import "compass/utilities/color/contrast";

$contrasted-lightness-threshold: 50%;

//COLOR BOXES IN STYLEGUIDE
.color-box {
	display: inline-block;
	height: 100px;
	margin: 5px;
	padding: 20px;
	text-align: center;
	vertical-align: top;
	width: 100px;
	border-radius: 5px;
	&:before, &:after {
	   display: block;
	}
}

// THIS IS WHERE THE MAGIX HAPPENS
$colors: (
    brick-red: #89231a,
    strawberry: #be1e2d,
    deep-orange: #b94126,
    tangerine: #f16521,
    gold: #eeaf21,
    sunshine: #ffdd17,
    grass-green: #4a893f,
    lime: #8cc63e,
    grape-juice: #452e8b,
    funky-purple: #7e3f98,
    clay: #3b2314,
    white: #fff,
);

@each $color, $bgcolor in $colors {
    .color-box.#{$color} {
        @include contrasted($bgcolor);
        &:before {
            content: '$#{$color}';
        }
        &:after {
            content: '#{$bgcolor}';
        }
    }
}

SassMeister-output.css

body {
  font-family: Verdana, sans-serif;
}

.color-box {
  display: inline-block;
  height: 100px;
  margin: 5px;
  padding: 20px;
  text-align: center;
  vertical-align: top;
  width: 100px;
  border-radius: 5px;
}
.color-box:before, .color-box:after {
  display: block;
}

.color-box.brick-red {
  background-color: #89231a;
  color: white;
}
.color-box.brick-red:before {
  content: "$brick-red";
}
.color-box.brick-red:after {
  content: "#89231a";
}

.color-box.strawberry {
  background-color: #be1e2d;
  color: white;
}
.color-box.strawberry:before {
  content: "$strawberry";
}
.color-box.strawberry:after {
  content: "#be1e2d";
}

.color-box.deep-orange {
  background-color: #b94126;
  color: white;
}
.color-box.deep-orange:before {
  content: "$deep-orange";
}
.color-box.deep-orange:after {
  content: "#b94126";
}

.color-box.tangerine {
  background-color: #f16521;
  color: black;
}
.color-box.tangerine:before {
  content: "$tangerine";
}
.color-box.tangerine:after {
  content: "#f16521";
}

.color-box.gold {
  background-color: #eeaf21;
  color: black;
}
.color-box.gold:before {
  content: "$gold";
}
.color-box.gold:after {
  content: "#eeaf21";
}

.color-box.sunshine {
  background-color: #ffdd17;
  color: black;
}
.color-box.sunshine:before {
  content: "$sunshine";
}
.color-box.sunshine:after {
  content: "#ffdd17";
}

.color-box.grass-green {
  background-color: #4a893f;
  color: white;
}
.color-box.grass-green:before {
  content: "$grass-green";
}
.color-box.grass-green:after {
  content: "#4a893f";
}

.color-box.lime {
  background-color: #8cc63e;
  color: black;
}
.color-box.lime:before {
  content: "$lime";
}
.color-box.lime:after {
  content: "#8cc63e";
}

.color-box.grape-juice {
  background-color: #452e8b;
  color: white;
}
.color-box.grape-juice:before {
  content: "$grape-juice";
}
.color-box.grape-juice:after {
  content: "#452e8b";
}

.color-box.funky-purple {
  background-color: #7e3f98;
  color: white;
}
.color-box.funky-purple:before {
  content: "$funky-purple";
}
.color-box.funky-purple:after {
  content: "#7e3f98";
}

.color-box.clay {
  background-color: #3b2314;
  color: white;
}
.color-box.clay:before {
  content: "$clay";
}
.color-box.clay:after {
  content: "#3b2314";
}

.color-box.white {
  background-color: white;
  color: black;
}
.color-box.white:before {
  content: "$white";
}
.color-box.white:after {
  content: "white";
}

SassMeister-rendered.html

<!-- @una made this -->

<ul class="color-list">
    <li class="color-box brick-red"></li>
    <li class="color-box strawberry"></li>
    <li class="color-box deep-orange"></li>
    <li class="color-box tangerine"></li>
    <li class="color-box gold"></li>
    <li class="color-box sunshine"></li>
    <li class="color-box grass-green"></li>
    <li class="color-box lime"></li>
    <li class="color-box funky-purple"></li>
    <li class="color-box clay"></li>
</ul>