Advanced Search

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/)

Expand | Embed | Plain Text

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.