Sassの繰り返し処理｜@eachの使い方と実用例まとめ
SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。
Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】Sassの@for、@each、@whileといった繰り返し処理（ループ構文）が用意されています。
この記事では、@eachの使い方を解説し、スタイルを自動的に生成してコードの重複を減らし、保守性と柔軟性を高める方法を紹介します。
Sassの@eachとは？
Sassの@eachディレクティブは、リストやマップなどのデータの集合体を対象にループ処理を行う構文です。
スタイルを複数の値やパターンに対して適用したいときに最適です。
リストとマップについては下記の記事で詳しく紹介しています。
Sassで配列を使おう｜リストとマップの違いをしっかり理解しよう！基本構文
リスト（配列）の場合
リスト（配列）とは、順番のある値の集合体（配列）です。
カンマやスペースで区切った複数の値を１つの変数にまとめて保持できます。
Sassで配列を使おう｜リスト（配列）を徹底的に使いこなす！scss｜リスト（配列）の繰り返し基本構文
@each $value in $list {
// 繰り返し処理
}
基本構文の解説
$value… リストから取り出したひとつひとつの要素を置き換える任意の変数。省略不可。$list… 繰り返し対象のリスト。省略不可。
※繰り返し対象がリスト（配列）である場合、インデックスを取得することはできません。インデックスを取得したい場合はループ回数を取得する処理を加える必要があります。
scss｜リスト（配列）の繰り返し実例
// リストを定義
$colors: (red, blue, green);
$i: 1; // 繰り返し回数を初期化
// リストを繰り返す
@each $color in $colors {
.block-#{$i} {
color: $color;
}
$i: $i + 1; // 繰り返し回数を増やす
}
⇓
css｜リスト（配列）の繰り返し出力結果
.text-blue {
color: blue;
}
.text-red {
color: red;
}
.text-green {
color: green;
}
マップ（連想配列）の場合
マップとは、キーと値のペアをセットで管理する連想配列です。
キー（インデックス）に文字列を利用し、値に対してわかりやすい名前をつけて保持することができます。
Sassで配列を使おう｜マップ（連想配列）を徹底的に使いこなす！scss｜マップ（連想配列）の繰り返し
@each $key, $value in $map {
// 繰り返し処理
}
基本構文の解説
$key… マップ内の要素に対するキーを置き換える任意の変数。省略不可。{}内で$keyを使用しない場合は、コンパイルエラー回避のため$_とするとよい。$value… マップから取り出したひとつひとつの要素を置き換える任意の変数。省略不可。$map… 繰り返し対象のマップ。省略不可。
※繰り返し対象がマップ（連想配列）である場合、キーを取得することができます。キーを使用しない場合、$keyにあたる部分を$_にしておくと、「この変数は使わない」という意図を明示できます。
scss｜マップ（連想配列）の繰り返し実例
// マップを定義
$settings: (
color: blue,
font-size: 16px,
font-weight: bold
);
// マップを繰り返す
.box{
@each $key, $value in $settings {
#{$key}: $value;
}
}
⇓
scss｜マップ（連想配列）の繰り返し出力結果
.box{
color: blue,
font-size: 16px,
font-weight: bold;
}
@eachのオススメポイント
Sassの@eachディレクティブは、リスト（配列）やマップ（連想配列）などの複数の値を順に取り出して処理できます。
- わかりやすく簡潔な構文で複数の値を処理できる
Sassの
@eachは、構文が非常にシンプルで直感的です。
リストやマップの値を順に変数に代入しながら繰り返し処理を行うことができ、わずか数行で複数のスタイル定義をまとめて生成できるのが@eachの魅力です。手書きによる繰り返しを防ぎ、保守性・可読性も向上します。 - 値の変更があってもループ対象を書き換えるだけで済む
ループの対象となるリストやマップを予め定義しておけば、セレクタを増減したり、スタイルプロパティの設定値を変更したりする時も、リストやマップを更新することで足りるので、ループ処理部分に手を加える必要がありません。
スタイルの再生成が自動化され、構築後の作業ミスも防げるので、多人数での開発にも向いています。 - リストやマップをパーシャルにまとめておくことでよりカスタマイズしやすくなる
リストやマップはパーシャルにまとめておくと、後々カスタマイズしやすくなります。
パーシャルについては詳しくは下記の記事で紹介しています。
scssファイルを分割して管理するパーシャルの考え方と使い方①@each利用時の注意点
Sassの@eachは小さなミスが大きな出力ミスにつながることもあります。
便利な分だけ、仕組みを正しく理解して使うことが重要です。
- インデックスとキーの扱いに注意する
リストではインデックスは構文内では定義できません（詳細はこちら）
マップでは構文内でキーを定義する必要があります（詳細はこちら）。@each構文を利用するのに必要な変数をしっかり理解した上で使用しましょう。
変数の型は、type-of()で確認できます。scss｜変数の型によって処理を変更する
@if type-of($data) == 'map' { // マップ処理 } @else if type-of($data) == 'list' { // リスト処理 } - ループ対象が空のリストや null のときはループが1度も回らない
Sassでは、
@eachのループ対象が空（(),[]またはnull）だった場合、ループはまったく実行されません。
期待していた処理が実行・出力されないと、意図しないエラーになる可能性があるので、事前にlength()を利用してループ対象のリストやマップが空になっていないかをチェックすると安心です。scss｜リストが空か確認してから@eachする
// リストを定義 $colors: red, blue, green; // リスト内の要素数を取得 $length: length($colors); @if ( $length > 0 ) { // リストが空でなければ繰り返し処理を行う @each $color in $colors { .text-#{$color} { color: $color; } } }
その他の繰り返し構文と使い分け
Sassには、@each以外に@for、@whileという繰り返し構文があります。
それぞれ下記の記事で詳細に解説しています。
Sassの繰り返し処理｜@forの使い方と実用例まとめ
Sassの繰り返し処理｜@whileの使い方と実用例まとめそれぞれの違いと使い分けのポイントは下記の記事にまとめています。
Sassの繰り返し処理を整理しよう！@for/@each/@whileの違いと使い分けガイドまとめ
この記事では、@eachの使い方を解説し、リストやマップに格納した情報を繰り返してスタイルを自動的に生成し、コードの重複を減らし、保守性と柔軟性を高める方法を紹介しました。@forや@whileといったその他の繰り返し構文について、またそれぞれの使い分けと実用例は他の記事で紹介しています。@eachを使いこなしてスマートなコーディングをしていきましょう。
