SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。
Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】Sassの@for、@each、@whileといった繰り返し処理（ループ構文）が用意されています。
この記事では、@forの使い方を解説し、スタイルを自動的に生成してコードの重複を減らし、保守性と柔軟性を高める方法を紹介します。
Sassの@forとは？
Sassの@forディレクティブは、指定した数値の範囲内でループ処理を行う構文です。@forのループ回数は常に１ずつ増加し、JavaScriptなどと違って増分をカスタマイズすることはできません。
基本構文
scss
@for $value from $since through | to $until {
// 繰り返し処理
}
解説
$value… ループインデックス※を置く任意の変数名。省略不可$since… 開始値。through： 終了値を含むto：終了値を含まない$until… 終了値。
※ループインデックス … 現在の回転数
※throughまたはtoを利用する。
scss｜１～３回目まで繰り返して出力する使用例
@for $i from 1 through 3 {
.col-#{$i} {
width: 100% / 3 * $i;
}
}
$iという変数にループインデックスが順に代入され、それをもとにスタイルが繰り返し出力されます。$iには、１回転は1、２回転目は2のように、現在の回転数が入ります。
@forのオススメポイント
Sassの@forディレクティブは、数値に規則性があるスタイルを効率的に量産したいときに非常に便利です。
- 同じ構造のスタイルを数値ベースで量産できる
例えば
.col-1,.col-2〜.col-12のように、番号付きのクラスを大量に用意するといったケースは、レイアウト設計では頻出です。@forを使えば、たった数行のコードで規則的なスタイルを自動生成できます。@for $i from 1 through 12 { .col-#{$i} { width: (100% / 12) * $i; } } - クラス名やプロパティに規則性がある場合に最適
クラス名に連番を付けるだけでなく、
z-indexやfont-size、opacityなど、数値が段階的に変化するスタイルにも最適です。
@forを使えば、同じ構造で値だけが異なるスタイルの出力をまとめて行えるため、コードの重複を大幅に減らすことができます。@for $i from 1 through 5 { .z-#{$i} { z-index: $i; } .opacity-#{$i} { opacity: $i * 0.2; } } - 数を変えたいときにもループの範囲を変更するだけで済む
手書きのCSSでは、要素数を増やすたびに新しいクラスをコピペ・修正する必要がありますが、
@forを使えば、ループの数値を変更するだけでスタイルを簡単に変更できます。
@for利用時の注意点
Sassの@forは小さなミスが大きな出力ミスにつながることもあります。
便利な分だけ、仕組みを正しく理解して使うことが重要です。
@for～to/throughの違いを誤解する@forは数値の繰り返しで利用するループ構文です。
数値の上限を含めたいのか・含めたくないのかを明確に理解して使い分けましょう。0から始めたいときの扱いに注意CSS設計によっては、
.index-0,.col-0のように0から始めたいケースもあります。0をインデックスとして扱う場合、演算の結果が0になったりfalseと評価されることもあるので、@for内の処理内容にも気をつけましょう。@for $i from 0 through 2 { // $i = 0, 1, 2 .item-#{$i} { // $i = 0 の時 0px になるので注意 margin-top: (10px * $i); } }
その他の繰り返し構文と使い分け
Sassには、@for以外に@each、@whileという繰り返し構文があります。
それぞれ下記の記事で詳細に解説しています。
Sassの繰り返し処理｜@eachの使い方と実用例まとめ
Sassの繰り返し処理｜@whileの使い方と実用例まとめそれぞれの違いと使い分けのポイントは下記の記事にまとめています。
Sassの繰り返し処理を整理しよう！@for/@each/@whileの違いと使い分けガイドまとめ
この記事では、@forの使い方を解説し、数値の繰り返しの中でスタイルを自動的に生成してコードの重複を減らし、保守性と柔軟性を高める方法を紹介しました。@eachや@whileといったその他の繰り返し構文について、またそれぞれの使い分けと実用例は他の記事で紹介しています。@forを使いこなしてスマートなコーディングをしていきましょう。
