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.3)
// Compass (v1.0.0.alpha.18)
// ----

// Sass 3.3 is needed ==> SassScript Maps
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>