Generated by SassMeister.com.

LearningSass 02-26

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

/*
  These are the normal comments
*/

// These wont make it to the other end

.nav {
  border : 1px solid;
  a{
    text-decoration : none;
    &:hover{
      text-decoration : underline;
    }
  }
}

.container div {
  width: 3em;
  height: 3em;
  display: inline-block;

  $num-colors: 6;
  $base-color: #c24;

  @for $i from 0 to $num-colors {
    &:nth-child(#{$i}) {
      background: adjust-hue($base-color, 360deg / $num-colors * $i);
    }
  }
}

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

/*
  These are the normal comments
*/

// These wont make it to the other end

.nav {
  border : 1px solid;
  a{
    text-decoration : none;
    &:hover{
      text-decoration : underline;
    }
  }
}

.container div {
  width: 3em;
  height: 3em;
  display: inline-block;

  $num-colors: 6;
  $base-color: #c24;

  @for $i from 0 to $num-colors {
    &:nth-child(#{$i}) {
      background: adjust-hue($base-color, 360deg / $num-colors * $i);
    }
  }
}

.container div {
  width: 3em;
  height: 3em;
  display: inline-block;

  $num-colors: 6;
  $base-color: #c24;
  $spectrum: 180deg;
  $offset: 30deg;

  @for $i from 0 to $num-colors {
    &:nth-child(#{$i}) {
      background: adjust-hue($base-color, $offset + $spectrum / $num-colors * $i);
    }
  }
}

SassMeister-output.css

/*
  These are the normal comments
*/
.nav {
  border: 1px solid;
}
.nav a {
  text-decoration: none;
}
.nav a:hover {
  text-decoration: underline;
}

.container div {
  width: 3em;
  height: 3em;
  display: inline-block;
}
.container div:nth-child(0) {
  background: #cc2244;
}
.container div:nth-child(1) {
  background: #ccaa22;
}
.container div:nth-child(2) {
  background: #44cc22;
}
.container div:nth-child(3) {
  background: #22ccaa;
}
.container div:nth-child(4) {
  background: #2244cc;
}
.container div:nth-child(5) {
  background: #aa22cc;
}

.container div {
  width: 3em;
  height: 3em;
  display: inline-block;
}
.container div:nth-child(0) {
  background: #cc5522;
}
.container div:nth-child(1) {
  background: #ccaa22;
}
.container div:nth-child(2) {
  background: #99cc22;
}
.container div:nth-child(3) {
  background: #44cc22;
}
.container div:nth-child(4) {
  background: #22cc55;
}
.container div:nth-child(5) {
  background: #22ccaa;
}