$rainbows: (red, orange, yellow, green, teal, blue, purple);

$colors: ();

$totalStops:20;

​

@for $i from 0 through $totalStops{

    $colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma);

}

​

.rainbow {

    width: 200px;

    height: 200px;

    background: conic-gradient($rainbows);

    border-radius: 50%;

}

​

.colors {

    width: 200px;

    height: 200px;

    background: conic-gradient($colors);

    border-radius: 50%;

}

​

.rainbow,

.colors {

    float: left;

    margin: 20px;

}

​

.container {

    position: absolute;

    overflow: hidden;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}