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

DEMO

---

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

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

DEMO

---

备注:

为了能够使用你需要运行 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;
}

DEMO