less 循环

Posted 2020-11-24 deajax

.loop(@n, @i: 1) when (@i =< @n) {
    .primary-@{i} {
        background: mix(@primary, #fff, 10%*@i);
    }
    .secondary-@{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: (1000-@i);
    }

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