触控笔变量插值在动画中不起作用属性？

Question

我在让变量插值在 Stylus 中始终如一地工作时遇到了很多麻烦。使用当前在 CodePen 上的版本，没有 Javascript 或任何东西。

下面的 Stylus 代码在我看来 它将用动画 slide0 为 div0 设置动画，用动画 slide1 为 div1 设置动画，等等...

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

能否提供问题的codepen，或者单独尝试animation-name: slide{i}

Answer 2

目前您不能在属性或字符串的值内使用插值。但是你可以使用连接：

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

触控笔变量插值在动画中不起作用属性？

Stylus variable interpolation not working in the animation property?

css

stylus

触控笔变量插值在动画中不起作用 属性？

Stylus variable interpolation not working in the animation property?

css

stylus

触控笔变量插值在动画中不起作用属性？