【PR】を含みます。

フロントエンド

【SCSS】ループ処理（繰り返し処理）の書き方まとめ！@for・@each・@whileの違いと活用

SCSS ループ処理（繰り返し処理）の書き方まとめ！@for・@each・@whileの違いと活用

SCSSでは、ループ処理を利用することで、スタイルの記述を簡潔にし、保守性を向上させることができます。

本記事では、SCSSの繰り返し処理で使われる@for、@each、@whileの違いと具体的な活用例を紹介します。

@for の使い方

@for は、指定した範囲内で繰り返し処理を行う際に使用します。

基本構文

@for $i from 開始値 through 終了値 {
  // 繰り返し処理
}

throughは終了値を含みます。

一方、toを使うと終了値を含みません。

使用例

余白調整用のスタイルを作成しています。

SCSS
Copy
@for $i from 1 through 5 {
  .mt#{$i} {
    margin-top: 10px * $i;
  }
}

出力されるCSS

.mt1 {
  margin-top: 10px;
}

.mt2 {
  margin-top: 20px;
}

.mt3 {
  margin-top: 30px;
}

.mt4 {
  margin-top: 40px;
}

.mt5 {
  margin-top: 50px;
}

@each の使い方

@eachはリストやマップの要素ごとに処理を適用する場合に使用します。

基本構文

@each $変数 in リスト {
  // 繰り返し処理
}

リスト(配列)の使用例

SCSS
Copy
$colors: "red", "green", "blue";
@each $color in $colors {
  .text-#{$color} {
    color: #{$color};
  }
}

出力されるCSS

.text-red {
  color: red;
}

.text-green {
  color: green;
}

.text-blue {
  color: blue;
}

マップ（連想配列）の使用例

SCSS
Copy
$theme-colors: (
  primary: blue,
  secondary: gray,
  danger: red
);
@each $name, $color in $theme-colors {
  .bg-#{$name} {
    background-color: $color;
  }
}

出力されるCSS

.bg-primary {
  background-color: blue;
}

.bg-secondary {
  background-color: gray;
}

.bg-danger {
  background-color: red;
}

@while の使い方

@whileは条件が満たされている間、処理を繰り返します。

基本構文

$変数: 初期値;

@while 条件 {
  // 繰り返し処理
  $変数: 更新;
}

使用例

SCSS
Copy
$i: 1;
@while $i <= 5 {
  .line-#{$i} {
    border-width: 1px * $i;
  }
  $i: $i + 1;
}

出力されるCSS

.line-1 {
  border-width: 1px;
}

.line-2 {
  border-width: 2px;
}

.line-3 {
  border-width: 3px;
}

.line-4 {
  border-width: 4px;
}

.line-5 {
  border-width: 5px;
}

まとめ

SCSSのループ処理を活用すると、CSSの記述を効率化し、管理しやすくなります。

@for固定範囲の繰り返しに適用（例：ボックスサイズや余白の調整）
@eachリスト・マップの要素ごとに適用（例：色の適用）
@while条件が満たされる限り繰り返し（例：変数を使った動的な設定）

適切なループを使い分けて、SCSSをより効率的に活用しましょう！

-フロントエンド
-