Sass error for loop with animation duration

Question

I am having an issue with a Sass loop. I want to make the animation .1 seconds, .2 seconds etc...Here is the loop:

@for $i from 1 through 6 {
  #elem span:nth-child(#{$i}) {
    animation-delay: .#{$i}s;
  }
}

The issue seems to be with the period here: .#{$i}s

If I remove it it works fine, but I get my animation in seconds and not fractions of a second as I would like it.

Why not make it `#{$i}00ms` ? – Praxis Ashelin Mar 14 '14 at 16:36 — Praxis Ashelin, Mar 14 '14 at 16:36

Hashem Qolami · Accepted Answer · 2014-03-14T16:43:42.613

1

You could wrap the .#{$i}s by quotes and then use unquote() string function to fix the issue, as follows:

@for $i from 1 through 6 {
  #elem span:nth-child(#{$i}) {
    animation-delay: unquote(".#{$i}s");
  }
}

From the doc:

unquote($string) Removes quotes from a string. If the string is already unquoted, this will return it unmodified.

edited Mar 14 '14 at 16:43

answered Mar 14 '14 at 16:37

Hashem Qolami

@Grinfax You are welcome. Seems you are new to Stackoverflow, If so, please consider *[What should I do when someone answers my question?](http://stackoverflow.com/help/someone-answers)*. – Hashem Qolami Mar 14 '14 at 16:50

1 Answers1