color-wheel-loop-1.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
  ul li:nth-of-type(#{$i}){
    border-left: 205px solid transparent;// this creates a triangle
    border-top: 120px solid  $main-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);
  }
}