change items color dynamically using scss loops

style.scss

$base-color: rgb(239, 109, 172);
$gradiated-buttons-count: 10;
$strength: 5; 
$degrees: 20deg;

.sidebar {
    @for $i from 0 to $gradiated-buttons-count {
        ul {
            li:nth-child(#{$i}) {
                img {
                    // exponential
                    background-color: darken($base-color, $i*$strength);

                    // degree based hue
                    background-color: adjust-hue($base-color, $degrees*$i)
                }
            }
        }
    }
}