如何覆盖 SCSS for 循环中的整数步（从 * 到 *）

Question

有办法吗？

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 包含在 class 名称中将其视为嵌套 class.

Answer 1

完成！ Hacky，但它有效：

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;
}

如何覆盖 SCSS for 循环中的整数步（从 * 到 *）

How to override whole number steps in SCSS for loop (from * through *)

for-loop

sass

increment