SCSSの「for」の使い方

SCSSでは for を使って繰り返しを指定することができます。

今回は「for」を使ったスタイルの設定方法についてご紹介します。

@for

for には through を使う方法と、to を使う方法の2種類の書き方があります。

@for '変数' from '開始値' through '終了値' {
  処理（スタイル定義など）
}

@for '変数' from '開始値' to '終了値' {
  処理（スタイル定義など）
}

through は終了値を含む値まで処理されます。
対して to は終了値の直前までの値まで処理を実行します。

through と to の挙動の違い

through は終了値を含む値まで処理され、対して to は終了値の直前までの値まで処理を実行します。

この through と to の挙動の違いについて確認します。

@for $i from 1 through 4 {
  .block {
    order: $i;
  }
}

.block {
  order: 1
}

.block {
  order: 2
}

.block {
  order: 3
}

.block {
  order: 4
}

@for $i from 1 to 4 {
  .block {
    order: $i;
  }
}

.block {
  order: 1
}

.block {
  order: 2
}

.block {
  order: 3
}

結果を見てみると2つの挙動の違いがよくわかります。

@for $i from 1 through 4 の指定では繰り返しの処理は4回行われます。
@for $i from 1 to 4 の場合は実際によりが行われる回数は3回となります。

見出しのスタイルを設定するサンプル

for を使って、見出し要素のh1～h6までの文字サイズを指定するサンプルです。
この方法では、h1～h6まで一定の間隔で文字サイズが変わることが条件となります。

SCSS

$h1_font_size: 42px;

@for $i from 1 through 6 {
  $size: $h1_font_size - (4 * ($i - 1));
  h#{$i} {
    font-size: $size;
  }
}

CSS

h1 {
  font-size: 42px
}

h2 {
  font-size: 38px
}

h3 {
  font-size: 34px
}

h4 {
  font-size: 30px
}

h5 {
  font-size: 26px
}

h6 {
  font-size: 22px
}

h1の文字サイズを基準として変数に入れておきます（42px）

forの中では、$iのインデックスの数値を使って 文字サイズを計算します。
計算結果の値（$size）を見出し要素の文字サイズとして設定します。

1回目の処理では…　$i には1が入っているので、計算式は $size = 42px - (4 * (1 - 1)) となり、
計算結果は 42 となります。

6回目の処理では…　計算式は $size = 42px - (4 * (6 - 1)) で、計算結果は 22 となります。