Wie Eigenschaftswert in CSS Schleife Klasse WENIGER

Question

Ich habe dieses SCSS Code

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

, die in CSS

dazu kompiliert

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

Wie ich tun, um die gleiche Funktion in css WENIGER?

Answer 1

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

Ergebnis ist:

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

Answer 2

Dieses Stück weniger Code:

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

.order(3); 

Ergebnisse in dieser CSS:

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