用Less循环生成样式

需求是这样的,我要给一个轮播图设置不同的背景图,由于每张图片的背景图路劲都不一样,所以需要对每个单独的元素自定义图片路径。
然后想到Less语法有mixin机制,就这样实现了一个递归function,
然后将对应的文件名按照这个规则放置就行了,banner1-bg.png, banner2-bg.png,,,,,,

贴出代码:

 1 @basePicUrl : ******/img/banner;
 2 .bg ( @a ) {
 3   .pic@{a} {
 4     background-image: url('@{basePicUrl}@{a}-bg.png');
 5     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src="'@{basePicUrl}@{a}-bg.png'",sizingMethod="scale");
 6   }
 7 }
 8 .loop(@counter) when (@counter > 0) {
 9   .bg(@counter);
10   .loop(@counter - 1);
11 }
12 .loop(4);
原文地址:https://www.cnblogs.com/rayjs/p/lessStyle.html