Last Updated: May 24, 2017
·
570
· Jérome Freyre

Create an automatic sequential color with nth-child

Algorithm

Based on nb of color the sequence in a nth-selector could be generalised as nth-child({length}n-{color-index}). It also means that it could be automatically integrated into a sass loop as described below

Demo

$colors-list: red whitesmoke blue yellow orange green purple pink cyan chocolate;

@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
  li:nth-child(#{length($colors-list)}n+#{$i}) { 
        t: length($colors-list);
        color: $current-color;
    }
}

Result could be viewed on https://codepen.io/jfreyre/pen/MmLGMm