Sassの繰り返し処理を整理しよう！@for/@each/@whileの違いと使い分けガイド

投稿日：2025/07/03
CSS・Sass
scss, @for, @each, @while

SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。

この記事では、Sassの繰り返し処理（ループ構文）を使うことで、スタイルを自動的に生成し、コードの重複を減らし、保守性と柔軟性を高める方法を紹介します。

Sassで繰り返し処理を活用しよう

Sassの繰り返し処理は「CSS生成」のための機能

Sassの@for、@each、@whileといった繰り返し処理は、一見すると PHPやJavaScriptなどの一般的なプログラミング言語のループ構文に似ています。
しかし、Sassのループはスタイル（CSS）の自動生成に特化した処理であり、他言語のループとは使い方や目的に明確な違いがあります。

たとえば、PHPでのループは、ブラウザにアクセスしたタイミングなど、アプリケーションの実行時に発動し、Webページ内に繰り返しのHTMLを出力したり、条件に応じて処理を分けて画面を動的に構築します。
一方、Sassのループは、コンパイル時に発動し、CSSを効率よく出力することが目的です。

Sassでループ処理が必要になる場面とは？

CSSでは、似たようなスタイルルールを繰り返し記述したくなる場面が頻繁に出てきます。
たとえば、

カラーパターンを変えて.btn-primary・.btn-secondary・.btn-dangerなどのバリュエーションを作りたい
.col-1～.col-12のようにクラス名や設定内容が連番や等倍で変化するバリュエーションを作りたい
同じ構造のパーツに対して、サイズやフォントだけを段階的に変えたい

など、同じようなCSSをパターンやルールに従って複数書く必要がある状況では、Sassの繰り返し処理（ループ構文）を使うことでスタイルを自動的に生成し、コードの重複を減らし、保守性と柔軟性を高めることができます。

Sassでループ構文を使うメリット

Sassの繰り返し処理を使うと、下記のようなメリットがあります。

コードのコピペ回数が減る
ロジックに基づいて自動でCSSを生成できる
scssファイル内のネストを減らすことができる
デザインを簡単に一括変更できる
似たようなプロパティが設定されたセレクタの量産を防ぐことができる

ループ構文を使ってコーディングを効率化しよう

CSSをコーディングする時、似たようなセレクタ・プロパティを何度も書くことになりがちです。
Sassのループ構文を活用して、コーディングを省力化し、CSSを効率的に生成しましょう。

Sassを効率的に書くコツ

バリュエーションの違いを意識する
CSSを書くとき、「色だけが違う」「サイズだけが違う」など、同じ構造で異なる値を持つスタイルを書く場面が多くあります。
これを人間がその都度書くのではなく、同じ形の構造体のバリュエーションがいくつもあると見立て、自動的に記述させるという発想が大事です。
なにが違うのか、どこが違うのかを意識すると、どの部分をループ化すればよいのかがわかります。
「データの違い」に着目し、同じ部分は流用しながら、異なる部分がどう違うかを書いてみましょう。

scss｜色違いのバリュエーションを量産する
```
$colors: (primary: #007bff, secondary: #6c757d, danger: #ff0000);

@each $name, $color in $colors {
  .btn-#{$name} {
    background-color: $color;
  }
}
```
上記の例では、色名のリストをデータとして管理し、それを繰り返して一つずつのボタンのスタイルを自動生成しています。
色を増やしたい・変えたい時にはマップの内容を変更するだけで済むので、変更コストが圧倒的に低くなります。
処理のルールをコード化する
通常のCSSは、クラスの命名規則などのルールを人間の手で都度守って書く必要があります。
Sassのループを使えば、どういう規則でクラス名をつけるか、設定値を変えるかなどをロジックとして記述できます。

scss｜サイズ違いのバリュエーションを量産する
```
@for $i from 1 through 5 {
  .col-#{$i} {
    width: (100% / 5) * $i;
  }
}
```
このコードでは、「５等分の幅を持った.col-Nクラスを作る」というルールをSassの構文で明確に表現しています。
将来的に数を変えたくなったとしても、ループの数値を変更するだけで済むので、変更コストが圧倒的に低くなります。
人の手で書くのではなく、Sassに書かせる
Sassのループ構文は、人間がひとつずつスタイルを手書きするのではなく、Sassに繰り返しパターンを“代わりに書かせる”ためのツールです。
この自動化の恩恵により、以下のような効果が得られます。
- ミスの防止（記述漏れ・数字の打ち間違い）
- 大規模スタイルの量産・変更が容易になる
- パターンをコードとして定義することでチームにルールを共有し、開発しやすくなる
つまり、Sassのループは楽をするためだけの機能ではなく、CSSの再利用性・保守性・可読性を高めプログラマブルな開発を行うための設計ツールなのです。

Sassのループ構文３種（@for / @each / @while）

Sassには、繰り返し処理を行うための構文が３種類用意されています。
それぞれが異なる目的や処理対象に特化しており、違いを知りうまく使い分けることでCSSの自動生成が非常に効率的になります。

このセクションでは、まずはそれぞれのディレクティブの役割と違いを整理します。

Sassのループ処理３種類の違いと特徴

３つのディレクティブの違いと特徴を下記の表にまとめました。

ディレクティブ	主な用途	処理対象	特徴
`@for`	数値の繰り返し	数値（範囲）	連番クラス・段階的な数値変化に最適。
`@each`	リストやマップの繰り返し	配列・マップ	値による条件分岐、キーと値の展開が可能。
`@while`	条件を満たす間繰り返し	任意の条件	条件の設定が少し難しい。無限ループに陥らないように注意が必要。

選び方のコツ

決まった回数を繰り返したい ⇒ @for
リストやマップの中身を処理したい ⇒ @each
繰り返すかどうか条件で制御したい ⇒ @while

繰り返したい内容や条件に応じて適切なディレクティブを利用しましょう。

@for：数値の繰り返し

@for は、開始値から終了値までの範囲を指定し、数値を繰り返す構文です。
ループインデックス（カウンター）を元に、クラス名や数値のスタイルを段階的に変化させるときに便利です。

scss記述例

@for $i from 1 through 3 {
// １～３回まで繰り返す
// .col-Nブロックのwidthを33%✕繰り返し回数で設定して作成
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}

詳しくは下記の記事で紹介しています。

@each：リストやマップに含まれる要素を順に処理

@eachは、リストやマップなどのデータの集合体を対象にループ処理を行います。
スタイルを複数の値やパターンに対して適用したいときに最適です。

scss記述例

// リストを定義
$colors: (red, blue, green);
// リストを繰り返す
@each $color in $colors {
 .text-#{$color} {
   color: $color; }
}

// マップを定義
$settings: (
    color: blue,
    font-size: 16px,
    font-weight: bold
);
// マップを繰り返す
.box{
    @each $key, $value in $settings {
        #{$key}: $value;
    }
}

詳しくは下記の記事で紹介しています。

@while：条件を満たす間繰り返す

@whileは、任意の条件がtrueである限りループを繰り返す構文です。
@forよりも柔軟なロジックが書ける一方で、無限ループのリスクがあるため、使用には慎重さが求められます。

scss記述例

$i: 1; // 回数を初期化

@while $i <= 3 {
// 回数が３以下である場合のみ繰り返す
// .box-Nのwidthを50px✕回数で設定して作成
  .box-#{$i} {
    width: 50px * $i;
  }
  // 回数を加算
  $i: $i + 1;
}

詳しくは下記の記事で紹介しています。