Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul>
  <li class="color-sample"></li>
  <li class="color-sample"></li>
  <li class="color-sample"></li>
  <li class="color-sample"></li>
  <li class="color-sample"></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

@import "compass";

body {
  font-family: 'Open Sans', Helvetica Neue, Arial;
  font-size: 16px;
}

%color-sample {
  width: 150px;
  height: 100px;
  display: inline-block;
  list-style: none;
  padding: 1em;
  text-align: center;
  margin: .5em;

  &:after {
    display: block;
  }

  &:before {
    display: block;
  }
}

// Colors
$colors: (
  jekyll-red: #d80000,
  makers-maroon: #77181e,
  no-snow-white: #fff,
  topo-chico: #c6d6d6,
  almost-black: #282b32
);

$i: 1;

@each $color, $bgcolor in $colors {
  
  .color-sample:nth-child(#{$i}) {
    @extend %color-sample;
    @include contrasted($bgcolor);
    &:before {
      content: '$#{$color}';
    }

    &:after {
      content: '#{$bgcolor}';
    }
  }
  $i: $i + 1;
}

SassMeister-output.css

body {
  font-family: 'Open Sans', Helvetica Neue, Arial;
  font-size: 16px;
}

.color-sample:nth-child(1), .color-sample:nth-child(2), .color-sample:nth-child(3), .color-sample:nth-child(4), .color-sample:nth-child(5) {
  width: 150px;
  height: 100px;
  display: inline-block;
  list-style: none;
  padding: 1em;
  text-align: center;
  margin: .5em;
}
.color-sample:nth-child(1):after, .color-sample:nth-child(2):after, .color-sample:nth-child(3):after, .color-sample:nth-child(4):after, .color-sample:nth-child(5):after {
  display: block;
}
.color-sample:nth-child(1):before, .color-sample:nth-child(2):before, .color-sample:nth-child(3):before, .color-sample:nth-child(4):before, .color-sample:nth-child(5):before {
  display: block;
}

.color-sample:nth-child(1) {
  background-color: #d80000;
  color: #fff;
}
.color-sample:nth-child(1):before {
  content: "$jekyll-red";
}
.color-sample:nth-child(1):after {
  content: "#d80000";
}

.color-sample:nth-child(2) {
  background-color: #77181e;
  color: #fff;
}
.color-sample:nth-child(2):before {
  content: "$makers-maroon";
}
.color-sample:nth-child(2):after {
  content: "#77181e";
}

.color-sample:nth-child(3) {
  background-color: #fff;
  color: #000;
}
.color-sample:nth-child(3):before {
  content: "$no-snow-white";
}
.color-sample:nth-child(3):after {
  content: "#fff";
}

.color-sample:nth-child(4) {
  background-color: #c6d6d6;
  color: #000;
}
.color-sample:nth-child(4):before {
  content: "$topo-chico";
}
.color-sample:nth-child(4):after {
  content: "#c6d6d6";
}

.color-sample:nth-child(5) {
  background-color: #282b32;
  color: #fff;
}
.color-sample:nth-child(5):before {
  content: "$almost-black";
}
.color-sample:nth-child(5):after {
  content: "#282b32";
}

SassMeister-rendered.html

<ul>
  <li class="color-sample"></li>
  <li class="color-sample"></li>
  <li class="color-sample"></li>
  <li class="color-sample"></li>
  <li class="color-sample"></li>
</ul>