sass: class name as a variable

Question

<ul>
  <li class="delay1">

  </li>
  <li class="delay2">

  </li>
  <li class="delay3">

  </li>
  <li class="delay4">

  </li>
  <li class="delay5">

  </li>
</ul>

<script>
  for (i=1;i<6;i++){
    $('li.delay'+i).css('transition-delay',100*i+'ms');
  }
</script>

How can I do the same thing with sass and WITHOUT javascript or having to write 5 lines of CSS?

I have read through the learn sass page but I don't even know what this mechanic is called. It doesn't look like a mixin.

score 1 · Answer 1 · answered Jul 26 '16 at 01:38

1

Use the for control directive along with interpolation

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

answered Jul 26 '16 at 01:38

steveax

17,527
6
44
59

Why not use the OP's classnames and styles, instead of copy+pasting the linked website? – rgthree Jul 26 '16 at 01:41
Thanks, what I needed was actually the term "interpolation" so I can search. Yours is the answer. – shenkwen Jul 26 '16 at 01:41

score 1 · Answer 2 · answered Jul 26 '16 at 01:42

1

This should do what you want

@for $i from 1 through 6 {
    li.delay#{$i} {
        transition-delay: 100*$i;
    }
}

answered Jul 26 '16 at 01:42

Joundill

6,828
12
36
50

sass: class name as a variable

2 Answers2