LESS loop to generate classes


/ Published in: CSS
Save to your folder(s)

Generate numbered classes and apply variable mixins.
Base from [http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/](http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/)


Copy this code and paste it in your HTML
  1. // mixins to call inside loop
  2. .applyMixin('gridSpan', @index) {
  3. #grid > .span-width(@index);
  4. }
  5.  
  6. .applyMixin('gridPush', @index) {
  7. #grid > .indent(@index);
  8. }
  9.  
  10. .applyMixin('gridPull', @index) {
  11. #grid > .indent([email protected]);
  12. }
  13.  
  14. // helper class, will never show up in resulting css
  15. // will be called as long the index is above 0
  16. .loop (@index, @class: item, @mixin: '') when (@index > 0) {
  17.  
  18. // create the actual css selector
  19. // use (~'[email protected]{class}[email protected]{index}') for LESS version < 1.4
  20. // call styles through mixin
  21. .applyMixin(@mixin, @index);
  22. }
  23.  
  24. // next iteration
  25. .loop(@index - 1, @class, @mixin);
  26. }
  27.  
  28. // end the loop when index is 0
  29. .loop (0) {}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.