@eachでページごとに背景画像を設定する【SCSS】

[talks text=’

後から変更があってもループ用の変数を修正するだけでOK。背景画像以外にも応用可能。

‘]

$pages: page1, page2 page3, page4;
@each $page in $pages {
  .#{$page}-bg {
    background-image: url(../images/#{$page}-bg.jpg);
  }
}

※CSSのセレクタ名・画像名はご自由に。