Generated by SassMeister.com.

SassMeister-input-HTML.haml

- 100.times do |i|
  %div{class: "swatch-#{i}"}

SassMeister-input.scss

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

$start-color: red;
$number-of-colors: 20;
$degrees: 360 / $number-of-colors;

@for $i from 0 to $number-of-colors {
  .swatch-#{$i} {
    background: adjust-hue($start-color, $i * $degrees);
  }
}

[class^="swatch"] {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: solid 1px #000;
}

SassMeister-output.css

.swatch-0 {
  background: red;
}

.swatch-1 {
  background: #ff4d00;
}

.swatch-2 {
  background: #ff9900;
}

.swatch-3 {
  background: #ffe500;
}

.swatch-4 {
  background: #ccff00;
}

.swatch-5 {
  background: #80ff00;
}

.swatch-6 {
  background: #33ff00;
}

.swatch-7 {
  background: #00ff19;
}

.swatch-8 {
  background: #00ff66;
}

.swatch-9 {
  background: #00ffb3;
}

.swatch-10 {
  background: cyan;
}

.swatch-11 {
  background: #00b2ff;
}

.swatch-12 {
  background: #0066ff;
}

.swatch-13 {
  background: #0019ff;
}

.swatch-14 {
  background: #3300ff;
}

.swatch-15 {
  background: #7f00ff;
}

.swatch-16 {
  background: #cc00ff;
}

.swatch-17 {
  background: #ff00e6;
}

.swatch-18 {
  background: #ff0099;
}

.swatch-19 {
  background: #ff004c;
}

[class^="swatch"] {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: solid 1px #000;
}

SassMeister-rendered.html

<div class='swatch-0'></div>
<div class='swatch-1'></div>
<div class='swatch-2'></div>
<div class='swatch-3'></div>
<div class='swatch-4'></div>
<div class='swatch-5'></div>
<div class='swatch-6'></div>
<div class='swatch-7'></div>
<div class='swatch-8'></div>
<div class='swatch-9'></div>
<div class='swatch-10'></div>
<div class='swatch-11'></div>
<div class='swatch-12'></div>
<div class='swatch-13'></div>
<div class='swatch-14'></div>
<div class='swatch-15'></div>
<div class='swatch-16'></div>
<div class='swatch-17'></div>
<div class='swatch-18'></div>
<div class='swatch-19'></div>
<div class='swatch-20'></div>
<div class='swatch-21'></div>
<div class='swatch-22'></div>
<div class='swatch-23'></div>
<div class='swatch-24'></div>
<div class='swatch-25'></div>
<div class='swatch-26'></div>
<div class='swatch-27'></div>
<div class='swatch-28'></div>
<div class='swatch-29'></div>
<div class='swatch-30'></div>
<div class='swatch-31'></div>
<div class='swatch-32'></div>
<div class='swatch-33'></div>
<div class='swatch-34'></div>
<div class='swatch-35'></div>
<div class='swatch-36'></div>
<div class='swatch-37'></div>
<div class='swatch-38'></div>
<div class='swatch-39'></div>
<div class='swatch-40'></div>
<div class='swatch-41'></div>
<div class='swatch-42'></div>
<div class='swatch-43'></div>
<div class='swatch-44'></div>
<div class='swatch-45'></div>
<div class='swatch-46'></div>
<div class='swatch-47'></div>
<div class='swatch-48'></div>
<div class='swatch-49'></div>
<div class='swatch-50'></div>
<div class='swatch-51'></div>
<div class='swatch-52'></div>
<div class='swatch-53'></div>
<div class='swatch-54'></div>
<div class='swatch-55'></div>
<div class='swatch-56'></div>
<div class='swatch-57'></div>
<div class='swatch-58'></div>
<div class='swatch-59'></div>
<div class='swatch-60'></div>
<div class='swatch-61'></div>
<div class='swatch-62'></div>
<div class='swatch-63'></div>
<div class='swatch-64'></div>
<div class='swatch-65'></div>
<div class='swatch-66'></div>
<div class='swatch-67'></div>
<div class='swatch-68'></div>
<div class='swatch-69'></div>
<div class='swatch-70'></div>
<div class='swatch-71'></div>
<div class='swatch-72'></div>
<div class='swatch-73'></div>
<div class='swatch-74'></div>
<div class='swatch-75'></div>
<div class='swatch-76'></div>
<div class='swatch-77'></div>
<div class='swatch-78'></div>
<div class='swatch-79'></div>
<div class='swatch-80'></div>
<div class='swatch-81'></div>
<div class='swatch-82'></div>
<div class='swatch-83'></div>
<div class='swatch-84'></div>
<div class='swatch-85'></div>
<div class='swatch-86'></div>
<div class='swatch-87'></div>
<div class='swatch-88'></div>
<div class='swatch-89'></div>
<div class='swatch-90'></div>
<div class='swatch-91'></div>
<div class='swatch-92'></div>
<div class='swatch-93'></div>
<div class='swatch-94'></div>
<div class='swatch-95'></div>
<div class='swatch-96'></div>
<div class='swatch-97'></div>
<div class='swatch-98'></div>
<div class='swatch-99'></div>