color-wheel-loop-2.scss

@for $i from 1 through 12 {
  $new-angle:$angle*$i; // every time the loop starts again the $new-angle is updated with $angle * the current position of the list
  $new-color:adjust-hue($main-color,$new-angle);
  ul li:nth-of-type(#{$i}){
    border-left: 205px solid transparent;// this creates a triangle
    border-top: 120px solid  $new-color;// this creates a triangle
    height: 0;
    left: 50%;
    list-style: none;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
    transform: rotate(#{$new-angle}deg);
  }
  .default-colors li:nth-of-type(#{$i}){
    border-top-color: $new-color;
  }
  .darken-colors li:nth-of-type(#{$i}){
    border-top-color: darken($new-color, $how-dark);
  }
  .lighten-colors li:nth-of-type(#{$i}){
    border-top-color: lighten($new-color, $how-light);
  }
}