Sassの@forを使って効率よくclassを作成する方法[Sass, Scss]

皆さんは、cssプリプロセッサとして、何をお使いでしょうか。
私がWeb制作で実際に携わる案件では、圧倒的に Sass を使用しているケースが多い印象です。

今回は、Sassでstyleを記述するときに使える便利機能について、書いていきたいと思います。

意外と知られていない？@forを使った、特定のパターンを持ったclassの作成

たとえば、0% 〜 100% まで、5%ごと増える width の値を持ったclassを量産したい。
そんなケースがあったとします。

そんな時、素のcssでは地道に

.width-0 { width: 0%; }
.width-5 { width: 5%; }
.width-10 { width: 10%; }
.width-15 { width: 15%; }
.width-20 { width: 20%; }
...(省略)...
.width-95 { width: 95%; }
.width-100 { width: 100%; }

↑このように、ほしい数の分だけ(このケースだと、単純にclassを必要な個数ぶん、地道に)定義していくしかありません。

しかし、Sassの@forを使えば、特定のパターンを持ったclassの作成が、
ほんの数行で一気にできてしまいます。
どういうことかというと、次のように書きます。

@for $i from 0 through 20 {
  .width-#{$i * 5} {
    width: $i * 5%;
  }
}

↑どちらが簡潔かは、明確ですよね。

Sass内で繰り返し処理ができる@for

上のセクションで書いた通り、Sassの@forを使うと、
JavaScriptや他の言語のfor文と同じ感覚で、繰り返しの処理を書くことができます。

上のセクションの例でいうと、
1行目の @for $i from 0 through 20 が繰り返しの範囲を示しています。
0 〜 20まで繰り返す、という意味です。(0始まりで、20まで繰り返されます)

2行目は、 .width-#{$i * 5} とすることで、
.width-0
.width-5
.width-10
のように、指定した式に応じて、繰り返し回数($i) * 5 のclass名が生成される、という意味になります。

3行目の width: $i * 5%; も同様で、
繰り返し回数 * 5% の値を持ったプロパティ(この場合はwidth)が生成されます。

上記を実際にコンパイルしてみると、本当にたった5行の記述で、

.width-0 { width: 0%; }
.width-5 { width: 5%; }
.width-10 { width: 10%; }
.width-15 { width: 15%; }
.width-20 { width: 20%; }
...(省略)...
.width-95 { width: 95%; }
.width-100 { width: 100%; }

↑これが再現できることが確認できると思います。