css - 如何将 Sass for 循环的索引归零？

Question

@for $i from 1 through $layer-count {
    #layer-#{$i} { background: url('../layers/layer-#{$i}.png'); }
    // background images are named layer-0001.png and up
}

必须有办法实现这一点，但我一直找不到任何东西。

Answer 1

你可以这样做：

@function zerofill($i) { @return #{str-slice("0000",0,4 - str-length(#{$i}))}$i; }

@for $i from 1 through $layer-count {
    $i: zerofill($i); // now $i holds the zro-filled value for further use
    #layer-#{$i} { background: url('../layers/layer-#{$i}.png'); }
}

演示

---

或者与更通用的函数相同，它采用零填充值的长度：

@function rep($n, $s: "0") {
    $out: $s;
    @while str-length($out) < $n { $out: $out + $s; }
    @return $out;
}
@function zerofill($i, $n) { @return #{rep($n - str-length(#{$i}))}$i; }

演示

---

笔记：

为了能够使用你需要运行 Sass v3.3的字符串函数，所以我快速重写了通用函数，以便它可以在旧的 Sass 版本中工作（我pow()也加入了它也已经集成在 v3.3 中，所以你可以只使用这zerofill()部分）：

@function pow($b, $n) {
  $f: $b; @while $n > 1 { $f: $f * $b; $n: $n - 1; } @return $f;
}
@function zerofill($i, $n){
  $f: pow(10, $n - 1); $out: null;
  @while $f >= 1 {
    $out: $out#{floor($i / $f)}; $i: $i - floor($i / $f) * $f; $f: $f / 10;
  } @return $out;
}

演示