Sassのfor文をうまく使うと楽になると気づいたので使い方をメモ

Sassでのfor文の使い方は以下の通りです。

@for $i from 【開始の数字】 through 【開始の数字】{
 ---繰り返す処理の内容---
}

使い方の例として、 リストにそれぞれ別の背景画像を設定するときは ~~~ html

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4

~~~ css
@for $i from 1 through 4 {
  li:nth-of-type(#{$i}) {
    background:url(../img/img#{$i}.jpg) no-repeat center left;
  }
}

上記の場合はiという変数を用意して、1から4まで繰り返すという記述になっています。 中身で$iを使用すればその数字を使用することが出来ます。

パスやセレクタなど変数をそのまま使用できないところは#{}で囲むことで使用がが可能です。

他にも、演算を使えば要素を均一に少しずつずらしたりとかうまく出来そうです。