cycling through a list of colors with sass

If its possible with pure CSS, its possible with Sass. This will work with any number of colors: http://codepen.io/cimmanon/pen/yoCDG $colors: red, orange, yellow, green, blue, purple; @for $i from 1 through length($colors) { li:nth-child(#{length($colors)}n+#{$i}) { background: nth($colors, $i) } } Output: li:nth-child(6n+1) { background: red; } li:nth-child(6n+2) { background: orange; } li:nth-child(6n+3) { background: yellow; … Read more

Loop through array of variable names in Less

See Loops. For example (assuming @green, @red, @blue variables are defined elsewhere): @colors: green, red, blue; .example_module { .-(@i: length(@colors)) when (@i > 0) { @name: extract(@colors, @i); &.@{name} {background: @@name} .-((@i – 1)); } .-; } – – – In Modern Less the same can be more straight-forward with the help of the Lists … Read more