如何覆盖SCSS for循环中的整数步骤（从*到*）[重复]答案

【问题标题】：How to override whole number steps in SCSS for loop (from * through *) [duplicate]如何覆盖SCSS for循环中的整数步骤（从*到*）[重复]
【发布时间】：2016-02-22 00:19:35
【问题描述】：

有没有办法做到这一点？

SCSS：（sudo 代码）

@for $i from 0 through 10 (increment:0.5) {
  .bottom-#{$i} {
    bottom: 1em * $i;
  }
}

CSS 输出：

.bottom-0 {
    bottom: 0em;
}

.bottom-05 {
    bottom: 0.5em;
}

.bottom-1 {
    bottom: 1em;
}

.bottom-15 {
    bottom: 1.5em;
}

.bottom-2 {
    bottom: 2em;
}

我本质上希望 for 循环以 0.5 为增量迭代到 10，输出类似于上面的 css 块中的内容，而类名中不包含 .5，因为它会将其视为嵌套类。

【问题讨论】：

@cimmanon - 这与您将其标记为重复的问题松散相关。请重新考虑。
我唯一要重新考虑的是我对重复项的选择。 stackoverflow.com/questions/18802148/…
@cimmanon - 这些是带有整数的步骤。关闭，但没有雪茄，当然？！我说的是半数，在类名中安全地表示，而不使用 . （原因很明显，哈哈！）
认真的吗？你会争辩说$i * .5 或$i / 2 与$i + 2 不同？
哎呀西玛侬，太具有侵略性了，无论如何都不能完全复制

标签： for-loop sass increment

【解决方案1】：

完成了！哈克，但它有效：

SCSS：

@for $i from 0 through 10 { // double 10 if you want to go to ten!

  $iletter: $i*10/2;
  @if $iletter < 10 {
    $iletter: "0" + $iletter
  }

  $i: $i/2;
  .bottom-#{$iletter} {
    bottom: 1em * $i;
  }
}

CSS 输出：

.bottom-00 {
  bottom: 0em;
}

.bottom-05 {
  bottom: 0.5em;
}

.bottom-10 {
  bottom: 1em;
}

.bottom-15 {
  bottom: 1.5em;
}

.bottom-20 {
  bottom: 2em;
}

.bottom-25 {
  bottom: 2.5em;
}

.bottom-30 {
  bottom: 3em;
}

.bottom-35 {
  bottom: 3.5em;
}

.bottom-40 {
  bottom: 4em;
}

.bottom-45 {
  bottom: 4.5em;
}

.bottom-50 {
  bottom: 5em;
}

【讨论】：