具有动画持续时间的循环的Sass错误

Question

我遇到了Sass循环的问题。我想制作动画.1秒，.2秒等......这是循环：

@for $i from 1 through 6 {
  #elem span:nth-child(#{$i}) {
    animation-delay: .#{$i}s;
  }
}

问题似乎与此处的时间段有关：.#{$i}s

如果我将其删除它可以正常工作，但我会在几秒钟内得到我的动画，而不是像我希望的那样。

Answer 1

您可以用引号括起.#{$i}s，然后使用unquote()字符串函数来解决问题，如下所示：

@for $i from 1 through 6 {
  #elem span:nth-child(#{$i}) {
    animation-delay: unquote(".#{$i}s");
  }
}

来自doc：

  

unquote($string)从字符串中删除引号。如果字符串是   已经没有引用，这将不加修改地返回。