sass：类名作为变量

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>

如何使用sass和WITHOUT javascript或者编写5行CSS来做同样的事情？

我已阅读learn sass页面，但我甚至不知道这个机制是什么。它看起来不像是混合物。

Answer 1

使用the for control directive和interpolation

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

Answer 2

这应该做你想要的事情

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