繰り返し

指定の条件に一致する場合に内容を繰り返していくのが繰り返し文です。
繰り返し文は@for、@while、@eachの3種類があります。
@forは開始番号から1ずつ増やしながら終了番号までを繰り返します。
@whileは条件式に一致し続ける限り永遠に繰り返します。
@eachはリスト（配列）やマップ（連想配列）を繰り返すときに使用します。

構文

@forの場合

							@for $変数名（現在の番号） from 開始 through 終了（含む） {

							    内容

							}
							または
							@for $変数名 from 開始 to 終了（含まれない） {

							    内容

							}
						

@whileの場合

							@while 条件式 {

							    内容

							}
						

@eachの場合

							@each $変数名（値） in リスト {

							    内容

							}
							または
							@each $変数名（キー）, $変数名（値） in リスト {

							    内容

							}
						

対応SASSバージョン：@for = 2.2.0+
対応SASSバージョン：@while = 3.1.2+
対応SASSバージョン：@each = 2.2.0+

サンプルコード：@for

fromに開始番号、through（またはto）に終了番号を指定します。
終了を表すthroughとtoの違いは、throughは指定した番号を含むのに対し、toは指定した番号を含みません。
変数（次のコードでいうところの$i）は現在の番号が格納されます。

サンプルコード：@while

条件式に一致し続ける限り永遠に繰り返しを行います。

サンプルコード：@each

リスト（配列）の場合

リストは区切り文字（次のコードではカンマ）の数分だけ繰り返され処理されます。
区切り文字は自動判別されます。
inの前に指定する変数は現在の値が格納されます。

マップ（連想配列）の場合

マップはカンマ区切り文字の数分だけ繰り返され処理されます。
inの前の最初の変数（次のコードでいう$key）は現在のキー、2番目の変数（次のコードでいう$val）は現在の値がそれぞれ格納されます。