Sassでfor文を使ってみる

はじめに

CSSを書いていると、同じようなスタイルを繰り返し書くことがあります。
Sass（.scss）では、for文を使って繰り返し処理を行い、スタイルを効率的に生成できます。
この記事では、基本的なfor文の書き方から、実践的な活用方法、そしてちょっとしたTipsまで紹介します。

---

for文を書いてみる

Sassのfor文は以下のような構文で書きます。

style.scss

@for $i from 1 through 5 {
  .box-#{$i} {
    width: 100px * $i;
  }
}

出力されるCSS

style.css

.box-1 {
  width: 100px;
}
.box-2 {
  width: 200px;
}
.box-3 {
  width: 300px;
}
.box-4 {
  width: 400px;
}
.box-5 {
  width: 500px;
}

through と to の違い

• hrough : 終了値を含む（1 through 5 → 1〜5まで）
• to : 終了値を含まない（1 to 5 → 1〜4まで）

実践的なfor文の使い方

グリッドレイアウトのクラスを自動生成

style.scss

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@for $i from 1 through 12 {
  .col-#{$i} {
    grid-column: span 1;
  }
}

index.html

<div class="container">
  <div class="col-1">あ</div>
  <div class="col-2">い</div>
  <div class="col-3">う</div>
  <div class="col-4">え</div>
  <div class="col-5">お</div>
  <div class="col-6">か</div>
  <div class="col-7">き</div>
  <div class="col-8">く</div>
  <div class="col-9">け</div>
  <div class="col-10">こ</div>
  <div class="col-11">さ</div>
  <div class="col-12">し</div>
</div>

12分割のgridレイアウトができました。

アニメーションのディレイを自動付与

style.scss

@for $i from 1 through 5 {
  .fadein-#{$i} {
    animation-delay: 0.2s * $i;
  }
}

これで、要素ごとに順番でフェードインさせる演出が簡単に作れます。

ネストとの組み合わせ

style.scss

.list {
  @for $i from 1 through 3 {
    li:nth-child(#{$i}) {
      color: hsl(200, 50%, 20% * $i);
    }
  }
}

最後に

Sassのfor文を使うと、重複コードを減らし、保守性の高いスタイルを実現できます。
グリッドやアニメーションのようなパターン生成に特に有効です。

もしまだ使ったことがない方は、ぜひ小さなプロジェクトから試してみてください。
Sassのループは、CSSを書く効率を大きく変えてくれます。