如何在SCSS中通过for循环生成001~100格式的三位数类名？

需求说明 #

希望通过SCSS的@for循环生成001到100格式的三位数类名，现有代码如下：

@for $i from 1 through 100 {
  .bg-image#{$i} {
    background-image: url("folder/bg-image#{$i}.jpg");
  }
}

期望编译后得到的CSS格式：

.bg-image001 {
  background-image: url("folder/bg-image001.jpg");
}
.bg-image002 {
  background-image: url("folder/bg-image002.jpg");
}
...
.bg-image099 {
  background-image: url("folder/bg-image099.jpg");
}
.bg-image100 {
  background-image: url("folder/bg-image100.jpg");
}

尝试过两种方法但在WebStorm中报错：

• 字符串补零方案
• 使用.bg-image#{"%03d" % $i}写法

可行解决方法 #

方法1：使用Sass内置str-pad函数（Sass 1.23.0+支持）

str-pad可直接对数字补零到指定长度，代码如下：

@for $i from 1 through 100 {
  $num: str-pad($i, 3, "0", "start");
  .bg-image#{$num} {
    background-image: url("folder/bg-image#{$num}.jpg");
  }
}

参数说明：str-pad(目标值, 目标长度, 填充字符, 填充位置)，这里用"start"表示从左侧补零。

方法2：自定义补零函数

若你的Sass版本较低不支持str-pad，可手动实现补零逻辑：

@function pad-zero($num, $length) {
  $str: $num + "";
  @while str-length($str) < $length {
    $str: "0" + $str;
  }
  @return $str;
}

@for $i from 1 through 100 {
  $num: pad-zero($i, 3);
  .bg-image#{$num} {
    background-image: url("folder/bg-image#{$num}.jpg");
  }
}

该函数将数字转为字符串，循环判断长度，不足时在左侧补零直至达到3位。

方法3：if判断手动补零

针对1-99的数字分层补零，适合场景简单的情况：

@for $i from 1 through 100 {
  $num: if($i < 10, "00#{$i}", if($i < 100, "0#{$i}", $i));
  .bg-image#{$num} {
    background-image: url("folder/bg-image#{$num}.jpg");
  }
}

通过嵌套if判断，对1-9补两个零，10-99补一个零，100直接使用原数字。

WebStorm报错说明 #

如果"%03d" % $i写法报错，大概率是项目使用LibSass（旧版编译器），而该格式化语法仅支持Dart Sass。可尝试将项目的Sass编译器切换为Dart Sass，或使用上述兼容更广的方法。

内容的提问来源于stack exchange，提问作者Syoki