ループ処理（ @for , @while , @each ）

Sass では、 @for , @while , @each を使ってさまざまなループ処理を実現することができます。

@for で指定した回数繰り返す

@for を使用すると、指定した回数分繰り返し処理を実行できます。指定した初期値から終値までインクリメント（またはデクリメント）しながらループするのですが、終値の指定に「 through 」と「 to 」の2つの方法が用意されています。「 through 」は、指定した終値を含んで実行されるのに対し「 to 」は、指定した終値を含みません。また、初期値より終値が小さい場合、デクリメントしながらループします。

@for 変数 from 初期値 through 終値 {
  // 何かしらの処理やスタイルの定義
}

@for 変数 from 初期値 to 終値 {
  // 何かしらの処理やスタイルの定義
}

次の例では、 .c-item-1 から .c-item-3 までのセレクタを作成し、それぞれ計算した結果で width を指定します。

@for $i from 1 through 3 {
  .c-item-#{$i} {
    width: 2em * $i;
  }
}

この SCSS をコンパイルすると次のような CSS が出力されます。

.c-item-1 {
  width: 2em; }

.c-item-2 {
  width: 4em; }

.c-item-3 {
  width: 6em; }

@while で条件式を満たさなくなるまで処理を繰り返す

@while を使うと、指定した条件を満た差なくなるまで処理を繰り返します。

@while 条件式{
  // 何かしらの処理やスタイルの定義
}

次の例では、 .c-item-1 から .c-item-3 までのセレクタを作成し、それぞれ計算した結果で width を指定します。

$i: 1;
@while $i < 4 {
  .c-item-#{$i} {
    width: #{($i * 10) + "em"};
  }
  $i: $i + 1;
}

この SCSS をコンパイルすると次のような CSS が出力されます。

.c-item-1 {
  width: 10em; }

.c-item-2 {
  width: 20em; }

.c-item-3 {
  width: 30em; }

@each で配列の個数分処理を繰り返す

@each を使うと、配列の個数分処理を繰り返します。

@each $変数 in $配列{
  //繰り返しの処理内容を書く
}

次の例では、変数 $size に3つの値をセットします。配列に入れられた値3個分を1つずつ取出し3つのセレクタを作成し、それぞれの値で width を作成します。

$sizes: 30px, 50px, 80px;

@each $size in $sizes {
  .c-item-#{$size} {
    width: $size;
  }
}

この SCSS をコンパイルすると次のような CSS が出力されます。

.c-item-30px {
  width: 30px; }

.c-item-50px {
  width: 50px; }

.c-item-80px {
  width: 80px; }