用LESS生成動畫延遲

Question

我想用LESS生成動畫延遲。最終的結果應該是相似的：

[data-animation-delay="1"] { 
    animation-delay: .5s; 
} 
[data-animation-delay="2"] { 
    animation-delay: 1s; 
} 

我的代碼如下所示：

@animation-delays: 10; 
@animation-delay-step: .5; // delay in seconds 

.animation-delays-loop (@i) when (@i > 0) { 
    [data-animation-step="@{i}"] { 
     @animation-delay = @animation-delay-step * @{i}; 
     animation-delay: @animation-delay~"s"; 
    } 
    .animation-delays-loop(@i - 1); 
} 
.animation-delays-loop (@animation-delays); 

但是，這是行不通的。這個問題似乎在animation-delay: @animation-delay~"s";。任何想法如何糾正它？

Answer 1

OK，我結束了這樣：

@animation-delays: 10; 
@animation-delay-step: .5; // delay in seconds 

.animation-delays-loop (@i) when (@i > 0) { 
    [data-animation-step="@{i}"] { 
     @animation-delay: @i * @animation-delay-step; 
     animation-delay: ~"@{animation-delay}s"; 
    } 
    .animation-delays-loop(@i - 1); 
} 
.animation-delays-loop (@animation-delays); 

工作就像一個魅力。