如何迭代關鍵幀百分比較少CSS

Question

我已閱讀Less#loops和Less#functions文檔。 但我不知道如何應用percentage函數，或類似的方式來逐步循環百分比而不使用這樣的函數。

當我計算出來的時候，正如另一個postwidth: percentage(140/620);中指出的那樣，它可以工作，但是在嘗試循環使用變量時沒有效果。

在2014 @pixelass建議使用外部library循環更容易，但我不喜歡使用外部庫。

什麼我想環路（甚至不編譯）：

.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. 
} 

我想這種無禮的話翻譯成減：像少編譯器

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

Answer 1

似乎直接用作選擇器時不會評估函數。解決辦法是使用一個臨時變量像無論是在下面的代碼片段：

.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. 
} 

或

.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. 
}