Wie Keyframe Prozentsätze iterieren Weniger CSS

Question

Ich habe gelesen Less#loops und Less#functions docs. Aber ich kann nicht herausfinden, wie percentage Funktion oder eine ähnliche Möglichkeit, Prozentsätze schrittweise ohne Anwendung einer solchen Funktion anwenden.

Wenn ich es aus einer Schleife berechnen, wie in einem anderen postwidth: percentage(140/620);, funktioniert es, aber nicht beim Versuch, mit Variablen zu loopen.

Auf 2014 vorgeschlagen @pixelass, eine externe library zu verwenden, um einfacher zu loopen, aber ich habe keine Lust, eine externe Bibliothek zu verwenden.

Was ich Schleife versuche (und kompilieren nicht einmal):

.loop (@n, @index: 0) when (@index < @n) { 
    percentage(@index * (100/@n)){ // This line is messing up my day. 
     // code 
    } 
    .loop(@n, (@index + 1)); // Next iteration. 
} 
@keyframes anim { 
    .loop(20); // Launch the loop. 
} 

ich diesen Sass weniger zu übersetzen versuche:

@keyframes anim{ 
    $steps:20; 
    @for $i from 0 through $steps{ 
     #{percentage($i*(1/$steps))}{ 
      // code 
     } 
    } 
} 

Answer 1

Es scheint, wie die weniger Compiler tut Funktionen nicht auswerten, wenn sie direkt als Selektor verwendet werden. Lösung wäre die Verwendung einer temporären Variablen zu machen, wie in einem der folgenden Schnipsel:

.loop (@n, @index: 0) when (@index <= @n) { /* note the <= as we need 100% frame also */ 
    @keyframeSel: percentage(@index/@n); /* note the lack of * 100 as Less already does it */ 
    @{keyframeSel}{ 
    prop: value; 
    } 
    .loop(@n, (@index + 1)); // Next iteration. 
} 
@keyframes anim { 
    .loop(20); // Launch the loop. 
} 

oder

.loop (@n, @index: 0) when (@index <= @n) { 
    @keyframeSel: @index/@n * 100%; 
    @{keyframeSel}{ 
    prop: value; 
    } 
    .loop(@n, (@index + 1)); // Next iteration. 
} 
@keyframes anim { 
    .loop(20); // Launch the loop. 
}