Интерполяция переменных Stylus не работает в свойстве анимации?

Question

У меня много проблем с получением переменной интерполяции, чтобы работать последовательно в Stylus. Используя версию его в настоящее время на CodePen здесь, нет Javascript или что-то еще.

Следующий код Stylus выглядит мне, как это будет живой div0 с анимацией slide0, живой Div1 с анимацией Slide1, и т.д. и т.п. ...

for i in (0...4) 
    .div{i} 
    width: 300px 
    animation: slide{i} 1s infinite //Syntax error here 

    @keyframes slide{i} 
    0% 
     letter-spacing: i*3px 
    100% 
     letter-spacing: 0px 

... Однако это только дает синтаксическая ошибка на линии animation:. Что для меня не имеет смысла, почему точный синтаксис работает, когда я пишу его в .div{i} и @keyframes slide{i}, но не в animation: slide{i}.

Это ошибка, которую CodePen дает мне, это не похоже на все, что уместно?

stylus:4:24 
    1| for i in (0...4) 
    2| .div{i} 
    3|  width: 300px 
    4|  animation: slide{i} 1s infinite 
-----------------------------^ 
    5| 
    6| @keyframes slide{i} 
    7|  0% 

expected ":", got "}" 

Answer 1

В настоящее время вы не можете использовать интерполяцию внутри значений свойств или строк. Но вы можете использовать конкатенацию:

for i in (0...4) 
    .div{i} 
    width: 300px 
    animation: slide + i 1s infinite 

@keyframes slide{i} 
    0% 
    letter-spacing: i*3px 
    100% 
    letter-spacing: 0px 

Answer 2

Можете ли вы предоставить codepen вашей проблемы, или попытаться animation-name: slide{i} отдельно