cycling through a list of colors with sass

by

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;
}

li:nth-child(6n+4) {
  background: green;
}

li:nth-child(6n+5) {
  background: blue;
}

li:nth-child(6n+6) {
  background: purple;
}

More Related Contents:

  1. How do I loop through or enumerate a JavaScript object?
  2. How can I add up two 2d (pitched) arrays using nested for loops?
  3. x86_64 – Assembly – loop conditions and out of order
  4. How to iterate over array of objects in Handlebars?
  5. How exactly does the x86 LOOP instruction work?
  6. Register variables in with_items loop in Ansible playbook
  7. “for” vs “each” in Ruby
  8. Loop through array of variable names in Less
  9. Jquery each – Stop loop and return object
  10. Looping on a protractor test with parameters
  11. While, Do While, For loops in Assembly Language (emu8086)
  12. How I can stop an animated GIF in JavaFX?
  13. Continuous Looping Page (Not Infinite Scroll)
  14. A puzzle related to nested loops
  15. Why should I use foreach instead of for (int i=0; i
  16. Script runtime execution time limit
  17. Sass @each variable interpolation [duplicate]
  18. Proper way to release resources with defer in a loop?
  19. Map in order range loop
  20. How to render a tree in Twig
  21. How to iterate or map over tuples?
  22. Ping a list of host names and output the results to a csv in powershell
  23. Get iteration index from List.map()
  24. Doesn’t JavaScript support closures with local variables? [duplicate]
  25. Effect of semicolon after ‘for’ loop
  26. How do I build a loop in JavaScript? [closed]
  27. Pythonic way to combine for-loop and if-statement
  28. Why is foreach loop Read-Only in C#
  29. Looping over urls to do the same thing
  30. Sum numbers returns NaN

Leave a Comment