Comment boucler la valeur de la classe en propriété dans css LESS - css, sass, less, flexbox

J'ai ceci SCSS code

.order {
@for $i from 1 through 3 {
&--#{$i} { order: $i; }
}
}

Qui compile à cela en CSS

.order--1 {
order: 1;
}
.order--2 {
order: 2;
}
.order--3 {
order: 3;
}

Comment faire la même fonction en css MOINS?

Réponses:

@i: 1;
.order (@i) when (@i <= 3) {
.order--@{i} {
order: ~"@{i}";
}
.order(@i + 1);
}
.order (@i);

Le résultat est:

.order--1 {
order: 1;
}
.order--2 {
order: 2;
}
.order--3 {
order: 3;
}

Ce morceau de moins de code:

.order(@n, @i: 1) when (@i =< @n) {
.order--@{i} {
order: @i;
}
.order(@n, (@i + 1));
}

.order(3);

Résultats dans ce css:

.order--1 {
order: 1;
}
.order--2 {
order: 2;
}
.order--3 {
order: 3;
}