Building a dynamic color swatch with Sass

SassMeister-input-HTML.html

<ul>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
</ul>

<ul>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
</ul>

SassMeister-input.scss

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

$alpha_primary: #5a2e2e;

@for $i from 1 through 10 {
  .tint-base:nth-child(#{$i}) {
    $percentage: $i * 0.1;
    $value: percentage($percentage) - 10%;
    background-color: tint($alpha_primary, $value);
  }
}

@for $i from 1 through 10 {
  .shade-base:nth-child(#{$i}) {
    $percentage: $i * 0.1;
    $value: percentage($percentage) - 10%;
    background-color: shade($alpha_primary, $value);
  }
}

// CSS for the sake of presentation
body {
  margin-top: 50px;
}

.swatch {
  float: left;
  position: relative;
  width: 64px;
  height: 64px;
  z-index: 11;
}

ul {
  float: left;
}

li {
  display: block;
}

SassMeister-output.css

.tint-base:nth-child(1) {
  background-color: #5a2e2e;
}

.tint-base:nth-child(2) {
  background-color: #6a4242;
}

.tint-base:nth-child(3) {
  background-color: #7b5757;
}

.tint-base:nth-child(4) {
  background-color: #8b6c6c;
}

.tint-base:nth-child(5) {
  background-color: #9c8181;
}

.tint-base:nth-child(6) {
  background-color: #ac9696;
}

.tint-base:nth-child(7) {
  background-color: #bdabab;
}

.tint-base:nth-child(8) {
  background-color: #cdc0c0;
}

.tint-base:nth-child(9) {
  background-color: #ded5d5;
}

.tint-base:nth-child(10) {
  background-color: #eeeaea;
}

.shade-base:nth-child(1) {
  background-color: #5a2e2e;
}

.shade-base:nth-child(2) {
  background-color: #512929;
}

.shade-base:nth-child(3) {
  background-color: #482424;
}

.shade-base:nth-child(4) {
  background-color: #3e2020;
}

.shade-base:nth-child(5) {
  background-color: #361b1b;
}

.shade-base:nth-child(6) {
  background-color: #2c1616;
}

.shade-base:nth-child(7) {
  background-color: #241212;
}

.shade-base:nth-child(8) {
  background-color: #1b0d0d;
}

.shade-base:nth-child(9) {
  background-color: #110909;
}

.shade-base:nth-child(10) {
  background-color: #080404;
}

body {
  margin-top: 50px;
}

.swatch {
  float: left;
  position: relative;
  width: 64px;
  height: 64px;
  z-index: 11;
}

ul {
  float: left;
}

li {
  display: block;
}

SassMeister-rendered.html

<ul>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
  <li class="swatch tint-base"></li>
</ul>

<ul>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
  <li class="swatch shade-base"></li>
</ul>