私が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%; }
↑これが再現できることが確認できると思います。
Sass公式の解説ページ
Sassの公式ページに、@forに関する解説ページがあります。
Sass: @for | sass-lang.com
↑こちらの公式ページには、:nth-child を使った場合の使用例が
サンプルコードとして書かれており、なるほど
こんな使い方もできるのねと、とても参考になります。
この記事のまとめ
今回は、Sassの@forを使って
一定のパターンを持ったclassを効率よく作成する方法について、記事を書きました。
この@for、Sassをお使いの方ならすでに
幅広く認知されていると思いきや、意外に忘れられている方法だったりしますので
あえて書いてみることにしました。
この他にもSassには、@eachを使った便利な記法などもありますので、
もしこの記事の続きを書くとすれば、その辺りの内容にも触れることできればと思っています。