Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="one">&nbsp;</div>
<div class="one-alt">&nbsp;</div>
<div class="two">&nbsp;</div>
<div class="two-alt">&nbsp;</div>
<div class="three">&nbsp;</div>
<div class="three-alt">&nbsp;</div>
<div class="four">&nbsp;</div>
<div class="four-alt">&nbsp;</div>
<div class="five">&nbsp;</div>
<div class="five-alt">&nbsp;</div>
<div class="six">&nbsp;</div>
<div class="six-alt">&nbsp;</div>
<div class="seven">&nbsp;</div>
<div class="seven-alt">&nbsp;</div>
<div class="eight">&nbsp;</div>
<div class="eight-alt">&nbsp;</div>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

$base: #fffcca;

$one: adjust-hue( $base, -10% );
$two: adjust-hue( $base, -20% );
$three: adjust-hue( $base, -30% );
$four: adjust-hue( $base, -40% );
$five: adjust-hue( $base, -50% );
$six: adjust-hue( $base, -60% );
$seven: adjust-hue( $base, -70% );
$eight: adjust-hue( $base, -80% );

$one-alt: darken($one, 2%);
$two-alt: darken($two, 2%);
$three-alt: darken($three, 2%);
$four-alt: darken($four, 2%);
$five-alt: darken($five, 2%);
$six-alt: darken($six, 2%);
$seven-alt: darken($seven, 2%);
$eight-alt: darken($eight, 2%);

.one { background: $one; }
.two { background: $two; }
.three { background: $three; }
.four { background: $four; }
.five { background: $five; }
.six { background: $six; }
.seven { background: $seven; }
.eight { background: $eight; }

.one-alt { background: $one-alt; }
.two-alt { background: $two-alt; }
.three-alt { background: $three-alt; }
.four-alt { background: $four-alt; }
.five-alt { background: $five-alt; }
.six-alt { background: $six-alt; }
.seven-alt { background: $seven-alt; }
.eight-alt { background: $eight-alt; }

div { height: 30px; margin-bottom: 1px; }

SassMeister-output.css

.one {
  background: #fff3ca;
}

.two {
  background: #ffeaca;
}

.three {
  background: #ffe2ca;
}

.four {
  background: #ffd9ca;
}

.five {
  background: #ffd0ca;
}

.six {
  background: #ffcacd;
}

.seven {
  background: #ffcad6;
}

.eight {
  background: #ffcadf;
}

.one-alt {
  background: #fff1c0;
}

.two-alt {
  background: #ffe6c0;
}

.three-alt {
  background: #ffdcc0;
}

.four-alt {
  background: #ffd1c0;
}

.five-alt {
  background: #ffc7c0;
}

.six-alt {
  background: #ffc0c3;
}

.seven-alt {
  background: #ffc0ce;
}

.eight-alt {
  background: #ffc0d8;
}

div {
  height: 30px;
  margin-bottom: 1px;
}

SassMeister-rendered.html

<div class="one">&nbsp;</div>
<div class="one-alt">&nbsp;</div>
<div class="two">&nbsp;</div>
<div class="two-alt">&nbsp;</div>
<div class="three">&nbsp;</div>
<div class="three-alt">&nbsp;</div>
<div class="four">&nbsp;</div>
<div class="four-alt">&nbsp;</div>
<div class="five">&nbsp;</div>
<div class="five-alt">&nbsp;</div>
<div class="six">&nbsp;</div>
<div class="six-alt">&nbsp;</div>
<div class="seven">&nbsp;</div>
<div class="seven-alt">&nbsp;</div>
<div class="eight">&nbsp;</div>
<div class="eight-alt">&nbsp;</div>