Generated by SassMeister.com.

SassMeister-input-HTML.haml

- colors = ['green', 'blue', 'yellow', 'red', 'silver']
- (colors).each do |color|
  %div{ :class => "#{color} column" }
    %p{ :class => "color-#{color}"} $color-#{color};
    - (1...5).each do |i|
      %p{ :class => "color-#{color}-#{i}"} $color-#{color}-#{i};

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$colors: (
  green: #2ecc71,
  blue: #3498db,
  yellow: #f1c40f,
  red: #e74c3c,
  silver: #bdc3c7
);
$dark-tint: #2c3e50;
$light-tint: #ecf0f1;

@each $name, $value in $colors {
  .color-#{$name} {
    color: $value;
    
    @for $i from 1 through 4 {
      &-#{$i} {
        color: mix($dark-tint, $value, ($i * 15%));
      }
    }
  }
}

.column {
  display: inline-block;
  vertical-align: top;
  margin: 1em;
  font-size: 22px;
  font-weight: bold;
}

[class*="color"] {
  border-left: 2.6em solid currentColor;
  padding-left: .25em;
  margin: 0;
  line-height: 1.6;
}

SassMeister-output.css

.color-green {
  color: #2ecc71;
}
.color-green-1 {
  color: #2db66c;
}
.color-green-2 {
  color: #2da167;
}
.color-green-3 {
  color: #2d8c62;
}
.color-green-4 {
  color: #2c765d;
}

.color-blue {
  color: #3498db;
}
.color-blue-1 {
  color: #328ac6;
}
.color-blue-2 {
  color: #317cb1;
}
.color-blue-3 {
  color: #306f9c;
}
.color-blue-4 {
  color: #2f6287;
}

.color-yellow {
  color: #f1c40f;
}
.color-yellow-1 {
  color: #d3af18;
}
.color-yellow-2 {
  color: #b59b22;
}
.color-yellow-3 {
  color: #98872c;
}
.color-yellow-4 {
  color: #7a7336;
}

.color-red {
  color: #e74c3c;
}
.color-red-1 {
  color: #ca493f;
}
.color-red-2 {
  color: #ae4742;
}
.color-red-3 {
  color: #924545;
}
.color-red-4 {
  color: #764348;
}

.color-silver {
  color: #bdc3c7;
}
.color-silver-1 {
  color: #a7afb5;
}
.color-silver-2 {
  color: #919ba3;
}
.color-silver-3 {
  color: #7b8791;
}
.color-silver-4 {
  color: #66737f;
}

.column {
  display: inline-block;
  vertical-align: top;
  margin: 1em;
  font-size: 22px;
  font-weight: bold;
}

[class*="color"] {
  border-left: 2.6em solid currentColor;
  padding-left: .25em;
  margin: 0;
  line-height: 1.6;
}

SassMeister-rendered.html

<div class='green column'>
  <p class='color-green'>$color-green;</p>
  <p class='color-green-1'>$color-green-1;</p>
  <p class='color-green-2'>$color-green-2;</p>
  <p class='color-green-3'>$color-green-3;</p>
  <p class='color-green-4'>$color-green-4;</p>
</div>
<div class='blue column'>
  <p class='color-blue'>$color-blue;</p>
  <p class='color-blue-1'>$color-blue-1;</p>
  <p class='color-blue-2'>$color-blue-2;</p>
  <p class='color-blue-3'>$color-blue-3;</p>
  <p class='color-blue-4'>$color-blue-4;</p>
</div>
<div class='yellow column'>
  <p class='color-yellow'>$color-yellow;</p>
  <p class='color-yellow-1'>$color-yellow-1;</p>
  <p class='color-yellow-2'>$color-yellow-2;</p>
  <p class='color-yellow-3'>$color-yellow-3;</p>
  <p class='color-yellow-4'>$color-yellow-4;</p>
</div>
<div class='red column'>
  <p class='color-red'>$color-red;</p>
  <p class='color-red-1'>$color-red-1;</p>
  <p class='color-red-2'>$color-red-2;</p>
  <p class='color-red-3'>$color-red-3;</p>
  <p class='color-red-4'>$color-red-4;</p>
</div>
<div class='silver column'>
  <p class='color-silver'>$color-silver;</p>
  <p class='color-silver-1'>$color-silver-1;</p>
  <p class='color-silver-2'>$color-silver-2;</p>
  <p class='color-silver-3'>$color-silver-3;</p>
  <p class='color-silver-4'>$color-silver-4;</p>
</div>