Comptez le nombre de noms de classe jusqu'à 3 chiffres via une boucle for (001 ~ 100) dans SCSS (SASS)

Question

Comment compiler $i en un « nombre à 3 chiffres » ?

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

Je veux qu'il se compile comme ça.

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

J'ai essayé de cette façon : https://www.sassmeister.com/gist/7581995

Comme ceci : .bg-image#{"%03d" % $i}

Mais j'ai eu une erreur dans webstorm.

Existe-t-il d’autres bonnes méthodes ? Merci pour votre aide.

Answer 1

https://www.sassmeister.com/gist/7581995 De cette façon, Il s'agit d'un problème d'espacement pendant le processus de construction.

Voici comment je l'ai résolu :

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