Sass - Combine string with variable in a @for loop

Question

So, I'm trying to learn SCSS and thought I'd try using a simple for loop to set transition-delays on a series of <li> elements.

I managed to get it to work, but I'm having a hard time combining the two strings I want. For example, this works fine:

li {
       @for $i from 1 through 8 
       {
           &:nth-of-type(#{$i}) 
           {
           transition-delay: #{$i}s;
           }
       }                            
  }

But, this gives me a transition delay of whole seconds. I want it to be (zero point seconds). Like 0.#{$i}s;

What am I missing? I've tried countless of variations and surely I'm just missing something really basic here? If I combine

halfzebra · Accepted Answer · 2015-10-14T13:33:57.413

2

Please check my example or SassMeister Gist:

li {
  @for $i from 1 through 8 {
    &:nth-of-type(#{$i}) {
      transition-delay:  0.1s * $i;
    }
  }                            
}

Here's more on that matter: All You Ever Need to Know About Sass Interpolation

edited Oct 14 '15 at 13:33

answered Oct 14 '15 at 11:35

halfzebra

6,771
4
32
47

Ah I see. I knew there was a way, should have thought of that myself though :p Thanx! – Kenny Bones Oct 14 '15 at 11:46
No, do not do this. This is completely the wrong way to do it. – cimmanon Oct 14 '15 at 12:01
@cimmanon Thanks for pointing out, I have updated the answer. – halfzebra Oct 14 '15 at 13:36

Sass - Combine string with variable in a @for loop

1 Answers1