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(-@index);
  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 (~'.@{class}_@{index}') for LESS version < 1.4
  20. .@{class}_@{index} {
  21. // call styles through mixin
  22. .applyMixin(@mixin, @index);
  23. }
  24.  
  25. // next iteration
  26. .loop(@index - 1, @class, @mixin);
  27. }
  28.  
  29. // end the loop when index is 0
  30. .loop (0) {}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.