在SCSS(SASS)中透過for迴圈(001~100)將類別名稱的數量計數到3位

Question

如何將 $i 編譯成「3 位數」？

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

我希望它像這樣編譯。

.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");
}

我嘗試過這樣的方式： https://www.sassmeister.com/gist/7581995

這樣： .bg-image#{" d" % $i}

#但在 webstorm 中出現錯誤。

還有其他好的方法嗎？ 感謝您的幫助。

Answer 1

https://www.sassmeister.com/gist/7581995 這樣， 這是建置過程中出現間距的問題。

我是這樣解決的：

@function zerofill($i) {
  @return #{str-slice("000",0,3 - str-length(#{$i}))}+$i;
}

@for $i from 1 through 100 {
  $i: zerofill($i);
  #layer-#{$i} { background: url('../layers/layer-#{$i}.png'); }
}