【Sass】@for文で繰り返し処理を記述する

sass

Sassでfor文を使って記述する方法についてまとめています。

サマリ

  • @forで宣言する
  • 変数は$iで記述する
  • from 1 through 2は1から始まって2回ループするの意味
  • 四則演算は単位がついた状態で計算できる（-0.32sなど）
  • background-imageのファイル名に数字が入っている場合などは、#{$i}で記述することで変数を用いたコーディングができる
@for $i from 1 through 2 {
    &:nth-child(#{$i}) {
        animation-delay: -0.32s / $i;
       
        // ファイル名に変数を使う場合の記述
        // background-image: url('./images/image#{$1}.png');
    }
}