我怎样才能将Sass for循环的索引zerofill？

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版本中运行（我投入了{{1}也已经集成在v3.3中了，所以你可以使用这个的pow()部分：

zerofill()

DEMO