如何将 $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 中出现错误。
还有其他好的方法吗？ 感谢您的帮助。
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'); } }