sass：类名作为变量[重复]答案

【问题标题】：sass: class name as a variable [duplicate]sass：类名作为变量[重复]
【发布时间】：2016-11-29 12:09:48
【问题描述】：

<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 做同样的事情而无需 javascript 或必须编写 5 行 CSS？

我已经阅读了learn sass 页面，但我什至不知道这个机制叫什么。它看起来不像是一个 mixin。

【问题讨论】：

标签： javascript sass less

【解决方案1】：

将the for control directive 与interpolation 一起使用

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

【讨论】：

为什么不使用OP的类名和样式，而不是复制+粘贴链接的网站？
谢谢，我需要的实际上是“插值”这个词，所以我可以搜索。你的就是答案。

【解决方案2】：

这应该做你想做的事

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

【讨论】：