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