Generated by SassMeister.com.

SassMeister-input-HTML.haml

- 10.times do |i|
  %div{:class => "box box-#{i + 1}"}

SassMeister-input.scss

// ----
// Sass (v3.2.13)
// Compass (v0.12.2)
// ----

$colors: (
  turquoise     #1abc9c
  emerald       #2ecc71
  green_sea     #16a085
  nephritis     #27ae60
  peter_river   #3498db
  belize_hole   #2980b9
  amethyst      #9b59b6
  wisteria      #8e44ad
  wet_asphalt   #34495e
  midnight_blue #2c3e50
  sun_flower    #f1c40f
  carrot        #e67e22
  orange        #f39c12
  pumpkin       #d35400
  alizarin      #e74c3c
  pomegranate   #c0392b
  clouds        #ecf0f1
  silver        #bdc3c7
  concrete      #95a5a6
  asbestos      #7f8c8d

);

@function list($list, $item) {
  @return nth($list, index($list, $item) + 1);
}

$primary-color: list($colors, alizarin);

body {
  background-color: $primary-color;
}

.box {
  background-color: black;
  float: left;
  width: 9%;
  height: 100px;
  margin-right: 10px;
}

@for $i from 1 through 10 {
  .box-#{$i} {
    position: relative;
    color: white;
    $color: mix($primary-color, #000, $i * 10%);
    background-color: $color;
    &:after {
      background-color: black;
      display: block;
      content: "#{$color}";  
      text-align: center;
      padding: 5px 0;
      font-family: sans;
    }
  };
}

SassMeister-output.css

body {
  background-color: #e74c3c;
}

.box {
  background-color: black;
  float: left;
  width: 9%;
  height: 100px;
  margin-right: 10px;
}

.box-1 {
  position: relative;
  color: white;
  background-color: #170705;
}
.box-1:after {
  background-color: black;
  display: block;
  content: "#170705";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-2 {
  position: relative;
  color: white;
  background-color: #2e0f0c;
}
.box-2:after {
  background-color: black;
  display: block;
  content: "#2e0f0c";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-3 {
  position: relative;
  color: white;
  background-color: #451612;
}
.box-3:after {
  background-color: black;
  display: block;
  content: "#451612";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-4 {
  position: relative;
  color: white;
  background-color: #5c1e18;
}
.box-4:after {
  background-color: black;
  display: block;
  content: "#5c1e18";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-5 {
  position: relative;
  color: white;
  background-color: #73261e;
}
.box-5:after {
  background-color: black;
  display: block;
  content: "#73261e";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-6 {
  position: relative;
  color: white;
  background-color: #8a2d24;
}
.box-6:after {
  background-color: black;
  display: block;
  content: "#8a2d24";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-7 {
  position: relative;
  color: white;
  background-color: #a1352a;
}
.box-7:after {
  background-color: black;
  display: block;
  content: "#a1352a";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-8 {
  position: relative;
  color: white;
  background-color: #b83c30;
}
.box-8:after {
  background-color: black;
  display: block;
  content: "#b83c30";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-9 {
  position: relative;
  color: white;
  background-color: #cf4436;
}
.box-9:after {
  background-color: black;
  display: block;
  content: "#cf4436";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

.box-10 {
  position: relative;
  color: white;
  background-color: #e74c3c;
}
.box-10:after {
  background-color: black;
  display: block;
  content: "#e74c3c";
  text-align: center;
  padding: 5px 0;
  font-family: sans;
}

SassMeister-rendered.html

<div class='box box-1'></div>
<div class='box box-2'></div>
<div class='box box-3'></div>
<div class='box box-4'></div>
<div class='box box-5'></div>
<div class='box box-6'></div>
<div class='box box-7'></div>
<div class='box box-8'></div>
<div class='box box-9'></div>
<div class='box box-10'></div>