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

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

結論のコードは次のとおりです。画像を0-01.jpgのような連番にし、@forの変数$iを#{$i}でセレクタとurlの両方に埋め込みます。

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

コンパイル後は#img1 { background-image: url('../assets/img/0-01.jpg'); }から#img8までの8個のルールになります。以下で手順を分けて説明します。

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文には次の2種類があります。

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

throughは最後の数字を含みます。
toは最後の数字を含みません。
どちらかを使用します。
上の例では、throughなら1から8まで、toなら1から7までを繰り返します。

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を囲います。

10枚以上あるときはゼロ埋めに注意する

上の書き方は0-0#{$i}と「0」を固定で書いているため、$iが10になると0-010.jpgになり、ファイル名と一致しません。10枚以上ある場合は、9以下のときだけ0を足す分岐を入れます。

@for $i from 1 through 12 {
  $num: if($i < 10, '0#{$i}', '#{$i}');

  #img#{$i} {
    background-image: url('../assets/img/0-#{$num}.jpg');
  }
}

if()はSassの組み込み関数で、条件が真なら2番目、偽なら3番目の値を返します。

現在のSass（Dart Sass）でも同じ書き方で動く

@forと#{}は、現在の標準実装であるDart Sassでもそのまま使えます。古いnode-sass（LibSass）は非推奨になっているため、新しく環境を作るならnpm install sassでDart Sassを入れてください。SCSSをコンパイルしたCSSをHTMLに読み込む方法はCSSの書き方と読み込み方法、画像の幅や高さを計算で決めたい場合はCSS calc()の使い方も参考にしてください。