生成类的循环更少

Posted 2021-02-23

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

// mixins to call inside loop
.applyMixin('gridSpan', @index) {
	#grid > .span-width(@index);
}
 
.applyMixin('gridPush', @index) {
	#grid > .indent(@index);
}
 
.applyMixin('gridPull', @index) {
	#grid > .indent([email protected]);
}
 
// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loop (@index, @class: item, @mixin: '') when (@index > 0) {
 
	// create the actual css selector
        // use (~'[email protected]{class}[email protected]{index}') for LESS version < 1.4
	[email protected]{class}[email protected]{index} {
		// call styles through mixin
		.applyMixin(@mixin, @index);
	}
 
	// next iteration
	.loop(@index - 1, @class, @mixin);
}
 
// end the loop when index is 0
.loop (0) {}