用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);

 

posted @ 2016-04-15 11:23  RayChen1221  阅读(1878)  评论(0)  编辑  收藏  举报