1

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.

1
  • Why not make it #{$i}00ms ? Mar 14, 2014 at 16:36

1 Answer 1

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.

1

Not the answer you're looking for? Browse other questions tagged or ask your own question.