【PR】を含みます。

Webデザイン

【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をより効率的に活用しましょう！

-Webデザイン
-