Clever Geek Handbook

Stylus variable interpolation not working on animation property?

I'm having a lot of trouble getting variable interpolation to work consistently in Stylus. Using the version of it currently on CodePen here, no Javascript or whatever.

The following Stylus code looks like it will animate div0 with slide0 animation, animate div1 with slide1 animation, etc. etc.

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

... however it just gives a syntax error on the line animation:

. What doesn't make sense to me is that the same syntax works when I write it in .div{i}

and @keyframes slide{i}

, but not in animation: slide{i}

.

Here is the error CodePen is giving me, doesn't seem like what's important?

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 "}"
+3


source to share


2 answers


Currently, you cannot use interpolation inside property values ​​or strings. But you can use concatenation:



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
+3


source


Can you provide a problem code or try it animation-name: slide{i}

separately



0


source






More articles:


All Articles