Usando loops em MENOS

Então você está usando LESS como seu pré-processador CSS. Uma das melhores coisas sobre o LESS é que você pode fazer loops e construir classes dinamicamente.

Exemplo:

Eu queria fazer classes para tornar divs uma porcentagem de seu contêiner em incrementos de 10. Eu poderia ter escrito 10 classes, mas isso é muito melhor e mais fácil de manter.

.mixin-loop (@index) when (@index > 0) {
.per-@{index}0 {
display
: inline-block;
width
: @index * 10%;
}
.mixin-loop(@index - 1);
}
.mixin-loop (0) {}
.mixin-loop(10);

Saídas …

.per-100 {
display
: inline-block;
width
: 100%;
}
.per-90 {
display
: inline-block;
width
: 90%;
}
.per-80 {
display
: inline-block;
width
: 80%;
}
.per-70 {
display
: inline-block;
width
: 70%;
}
.per-60 {
display
: inline-block;
width
: 60%;
}
.per-50 {
display
: inline-block;
width
: 50%;
}
.per-40 {
display
: inline-block;
width
: 40%;
}
.per-30 {
display
: inline-block;
width
: 30%;
}
.per-20 {
display
: inline-block;
width
: 20%;
}
.per-10 {
display
: inline-block;
width
: 10%;
}

Bom pré-processamento!