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

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

Следующий код стилуса выглядит так, как будто он будет анимировать 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 "}"

css stylus
person quat    schedule 16.05.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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
person Panya    schedule 16.05.2015
comment
О, это странное исключение, не знал, что интерполяция в свойствах не работает ... Большое спасибо! - person quat; 17.05.2015
comment
Просто потратил на это несколько часов .. Почему это невозможно? : O - person Jeff; 18.05.2016

arrow_upward
0
arrow_downward

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

person AskarovBeknar    schedule 16.05.2015