3-2. ループ処理（each・for・while）で繰り返し記述する手間を省く

1.@eachで配列の個数分、繰り返し処理を行う

1つの変数の中に、複数の値を入れたものを「配列」といいます。たとえばsizeという変数の中に3つの値を入れてみましょう。値は「,（カンマ）」で区切ります。

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

そして「@each」を使うと、この配列の個数分、繰り返しの処理をすることができます。

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

実際に使ってみましょう。

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

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

コンパイルします。

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

2.@forで決めた回数分、繰り返し処理を行う

@forを使うと、指定した回数分だけ繰り返しの処理を行うことができます。.box1、.box2、.box3…と連続したクラスに対してプロパティ・値を指定するというような場合に利用できます。

@forの書き方です。

@for $i from 開始値 through 終了値 {
  .box#{$i} {
    font-size:#{$i}px;
  }
}

開始値と終了値の箇所には数字が入ります。たとえば1〜3というふうにすると、.box1、.box2、.box3というふうにクラスが出力されます。つまり変数「i」のところに数字が入り、繰り返されると1ずつ増えていくということです。

`#{$i}`というのは編集を文字列として出力する際の記述方法です。

では実際の例を見てみましょう。以下のサンプルでは、関数lighten()で少しずつ色を変化させています。

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

コンパイルします。

ul:nth-child(3n + 1) {
  background-color: #004080;
}

ul:nth-child(3n + 2) {
  background-color: #004d99;
}

ul:nth-child(3n + 3) {
  background-color: #0059b3;
}

3.@whileで条件式にもとづいて、繰り返し処理を行う

@whileを使うと@forより柔軟に繰り返し処理が行えます。@whileのあとに条件式を記述し、条件を満たさなくなるまで何度も繰り返し処理を行います。

@while 条件式{
  // 繰り返し処理
}

@forと違い、繰り返しが起きても変数に変化は起きません。そのため繰り返し処理の内容には変数+1などの演算処理を記述しておきます。

14px・16px・18pxと、2pxずつ違うフォントサイズを出力してみます。

$var: 14;
@while $var <= 18 {
  .fs#{$var} {
    font-size: #{$var}px;
  }
  $var: $var + 2; 
}

コンパイル結果です。

.fs14 {
  font-size: 14px;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

ループ処理（each・for・while）と、条件分岐（if）を組み合わせると、さらに工夫が加えられます。次のレッスンで解説します。