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

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');
    }
}