Less 使用技巧

[BestDI]

01. Less中的loop循环

//下面是使用函数生成margin类名的方式
//定义margin数组
@0px: 0px;// 使用px单位时有个坑，必须采用+的方式，不然编译的不对
@marginList:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,24,30,40,48,50,75;
//margin-left函数
.ml-loop(@list,@i:1,@val:extract(@list,@i)) when (length(@list)>=@i){
    .ml@{val}{
        margin-left:@val + @0px;
    }
    .ml-loop(@list,(@i+1));
}
.ml-loop(@marginList);