Arquivo da categoria: LESS

Loop dentro de loop utilizando o LESS


@maxi: 2;
.i-loop (@i) when (@i > 0) {

@maxj: 3;
.j-loop (@j) when (@j > 0) {

.my-class-@{i}-@{j} {
width: (100% / @i);
height: (100% / @j);
}

.j-loop(@j - 1);
}
.j-loop (0) {}
.j-loop(@maxj);

.i-loop(@i - 1);
}
.i-loop (0) {}
.i-loop(@maxi);

return:
.my-class-2-3 {
width: 50%;
height: 33.33333333%;
}
.my-class-2-2 {
width: 50%;
height: 50%;
}
.my-class-2-1 {
width: 50%;
height: 100%;
}
.my-class-1-3 {
width: 100%;
height: 33.33333333%;
}
.my-class-1-2 {
width: 100%;
height: 50%;
}
.my-class-1-1 {
width: 100%;
height: 100%;
}