Generated by SassMeister.com.

loop-color-shades-output.css

li {
  color: white;
}
li:nth-of-type(1) {
  background: #663fb5;
}
li:nth-of-type(2) {
  background: #6e49b9;
}
li:nth-of-type(3) {
  background: #7653bd;
}
li:nth-of-type(4) {
  background: #7e5dc1;
}
li:nth-of-type(5) {
  background: #8668c5;
}
li:nth-of-type(6) {
  background: #8e72c8;
}
li:nth-of-type(7) {
  background: #967ccc;
}
li:nth-of-type(8) {
  background: #9e86d0;
}
li:nth-of-type(9) {
  background: #a690d4;
}
li:nth-of-type(10) {
  background: #af9ad8;
}
li:nth-of-type(11) {
  background: #b7a4dc;
}
li:nth-of-type(12) {
  background: #bfaee0;
}
li:nth-of-type(13) {
  background: #c7b8e4;
}
li:nth-of-type(14) {
  background: #cfc2e8;
}
li:nth-of-type(15) {
  background: #d7cdec;
}
li:nth-of-type(16) {
  background: #dfd7ef;
}
li:nth-of-type(17) {
  background: #e7e1f3;
}
li:nth-of-type(18) {
  background: #efebf7;
}
li:nth-of-type(19) {
  background: #f7f5fb;
}
li:nth-of-type(20) {
  background: white;
}

loop-color-shades-rendered.html

<ul>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
</ul>

loop-color-shades.html

<ul>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
</ul>

loop-color-shades.scss

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


@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}


@mixin color-shades($color, $mode: shade, $n: 10) {
  @for $i from 1 through $n {
    @if $mode == "shade" {
      &:nth-of-type(#{$i}) {
        background: mix(black, $color, $i*(100/$n));
      }
    } @else if $mode == "tint" {
      &:nth-of-type(#{$i}) {
        background: mix(white, $color, $i*(100/$n));
      }
    } 
  }
}

li {
  @include color-shades(#5E35B1, tint, 20);
  color: white;
}