less 循环

maiktom 2019-12-07

.loop(@n, @i: 1) when (@i =< @n) {
    {i} {
        background: mix(@primary, #fff, 10%*@i);
    }
    {i} {
        background: mix(@secondary, #fff, 10%*@i);
    }

    .loop(@n, (@i + 1));
}

.loop(10);
.generate-z-index(@n, @i: 1) when (@i =< @n) {
    .item:nth-child(@{i}) {
        z-index: ();
    }

    .generate-z-index(@n, (@i + 1));
}

.generate-z-index(100);
.backgroundcard(@className, @pngName) {
    {className} {
        background: url("./resource/@{pngName}.png") top/100% no-repeat;
    }
}
@bgcardList:a,b,c,d,e,f,g;

.loop(@i) when (@i < length(@bgcardList)+1){
    .backgroundcard(extract(@bgcardList, @i),extract(@bgcardList, @i));
    .loop(@i+1);
}
.loop(1);

相关推荐