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
Written by Jerome Freyre
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Sass
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#