【SCSS】background-imageで画像配列をforループ文で表示させる方法

2021年5月29日CSS

SCSS(SASS)のfor文を使って、background-imageで画像配列をループさせる方法を紹介します。

SCSSのfor文でbackground-imageをループさせるときの手順

画像を連番にする

imgフォルダなどを作成し、そこに画像を配置します。 そして、画像のファイル名を変更し、連番になるようにします。 たとえば、次の通りです。

0-01.jpg
0-02.jpg
0-03.jpg
...

htmlタグにidを指定する

次のように、htmlタグに連番になったidを指定します。

<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>
<div id="img6"></div>
<div id="img7"></div>
<div id="img8"></div>

これでimg1からimg8までをそれぞれ指定できるようになります。

for文を使って要素を連番にする

SCSSのfor文では次の２種類あります。

@for $i from 1 through 8 { }
@for $i from 1 to 8 { }

throughは最後の数字を含みます。 toは最後の数字を含みません。 どちらかを使用します。 上の例の場合、1から8を繰り返すという意味になります。

for文で連番のidを指定する

@for $i from 1 through 8 {
  #img#{$i} {
  }
}

上のidでは、img1・・・img8というようになっているので、#{}で$iを囲います。 そうすることで、その部分が1~8の数字を意味することになります。

background-image内のurlに連番を指定する

@for $i from 1 through 8 {
  #img#{$i} {
    background-image: url('../assets/img/0-0#{$i}.jpg');
  }
}

上と同じで0-01・・・0-08という部分が連番になっているので、 そこを#{}で$iを囲います。