SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。
Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】Sassの@for、@each、@whileといった繰り返し処理（ループ構文）が用意されています。
この記事では、@whileの使い方を解説し、スタイルを自動的に生成してコードの重複を減らし、保守性と柔軟性を高める方法を紹介します。
Sassの@whileとは？
Sassの@whileは、指定した条件が真（true）である間、繰り返し処理を実行するためのループ構文です。@forよりも柔軟なロジックが書ける一方で、無限ループのリスクがあるため、使用には慎重さが求められます。
基本構文
scss
@while 条件式 {
// 繰り返し処理
}
解説
条件式… 結果がtrueの間は繰り返し処理が発動する。falseになると繰り返し処理が停止する。
scss｜@while使用例
$i: 1; // $iを初期化
@while $i < 5 {
// $iが５より少ない時のみ繰り返す
.item-#{$i} {
width: 2em * $i;
}
// $iを加算
$i: $i + 1;
}
$iを予め初期化（定義）しておきます。$iを繰り返し処理の中で加算します。$iが５より少ない時（４回目まで）繰り返します。
@whileのオススメポイント
@whileはSassの中でも柔軟性が高く、条件に応じたループ処理が必要なときに真価を発揮します。
- 条件次第でループの終了タイミングを自由に制御できる
@forは開始と終了の数値が明確でなければ使えず、@eachは対象のリストやマップが必要です。
それに対して@whileは、ブール値として評価可能な任意の条件式でループを制御できます。 - ループの途中で基準値を自由に操作できる
@whileはループ内で使用する条件式内の変数（基準値）を自由に操作できるため、値に応じてループの振る舞いを変えることができます。scss｜変数を減らしていく繰り返し例
$size: 8; @while $size >= 1 { .box-#{$size} { font-size: $size * 2px; } $size: $size - 1; }このように「段階的に値を減らす」といった処理も柔軟に記述でき、ループの増減や方向すら自由に制御できます。
@while利用時の注意点
Sassの@whileは強力な反面、書き方を間違えると致命的なミスにつながる可能性があります。
下記の注意点を把握しておくことで、@whileを安全かつ効果的に活用できるようになります。
- 無限ループに注意する
@whileは、条件がtrueのままだと永遠にループし続ける構文です。
Sassはコンパイル中に無限ループを検出できないため、処理がフリーズしたり、コンパイルが失敗したりする原因になります。
必ずループ内で、条件を変化させる処理（変数の更新など）を忘れずに書きましょう。scss｜無限ループになる繰り返し例
$i: 1; @while $i <= 5 { .loop-#{$i} { width: 100px; } // $i の更新がない → 無限ループ！ } - ループ条件の初期化・更新忘れに注意する
@whileは@forと異なり、ループの基準となる変数や条件式を加算や変更してくれません。
そのため、ループの前に必ず初期化する必要があり、さらにループ内で手動で更新する必要があります。scss｜ループ変数の初期化・更新例
// ループ変数を初期化。 // 初期化を忘れると未定義エラーとなる。 $i: 1; // 繰り返し処理 @while $i <= 3 { .box-#{$i} { width: 10px * $i; } // ループ変数を更新。 // 更新し忘れると無限ループになる。 $i: $i + 1; } - シンプルな処理は@for/@eachで代替可能なことも
@whileは強力ですが、すべての繰り返し処理に使うべきではありません。
例えば、単純に一定回数だけ繰り返したい場合や、リストやマップを処理する場合は、@forや@eachの方が明確で安全です。
無理に@whileを使うと、読みづらく、ミスが起きやすいコードになる場合があります。
そのため、@whileは「@for/@eachでは表現できない処理がある場合」のみに使うのが理想です。
その他の繰り返し構文と使い分け
Sassには、@while以外に@for、@eachという繰り返し構文があります。
それぞれ下記の記事で詳細に解説しています。
Sassの繰り返し処理｜@forの使い方と実用例まとめ
Sassの繰り返し処理｜@eachの使い方と実用例まとめそれぞれの違いと使い分けのポイントは下記の記事にまとめています。
Sassの繰り返し処理を整理しよう！@for/@each/@whileの違いと使い分けガイドまとめ
この記事では、@forの使い方を解説し、指定した条件が真（true）である間、繰り返し処理を実行する中で、スタイルを自動的に生成してコードの重複を減らし、保守性と柔軟性を高める方法を紹介しました。@forや@eachといったその他の繰り返し構文について、またそれぞれの使い分けと実用例は他の記事で紹介しています。@whileを使いこなしてスマートなコーディングをしていきましょう。
