tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。Scss]皆さんは、cssプリプロセッサとして、何をお使いでしょうか。使用しているケースが多い印象です。今回は、Sassでstyleを記述するときに使える便利機能について、書いていきたいと思います。値を持ったclassを量産したい。そんなケースがあったとします。}↑このように、ほしい数の分だけ(このケースだと、単純にclassを必要な個数ぶん、地道に)定義していくしかありません。Sassの@forを使えば、特定のパターンを持ったclassの作成が、ほんの数行で一気にできてしまいます。いうことかというと、次のように書きます。}}↑どちらが簡潔かは、明確ですよね。Sass内で繰り返し処理ができる@for上のセクションで書いた通り、Sassの@forを使うと、JavaScriptや他の言語のfor文と同じ感覚で、繰り返しの処理を書くことができます。繰り返しの範囲を示しています。20まで繰り返す、という意味です。class名が生成される、という意味になります。値を持ったプロパティ(この場合はwidth)が生成されます。}↑これが再現できることが確認できると思います。Sass公式の解説ページSassの公式ページに、@forに関する解説ページがあります。使った場合の使用例がサンプルコードとして書かれており、なるほどこんな使い方もできるのねと、とても参考になります。この記事のまとめ今回は、Sassの@forを使って一定のパターンを持ったclassを効率よく作成する方法について、記事を書きました。この@for、Sassをお使いの方ならすでに幅広く認知されていると思いきや、意外に忘れられている方法だったりしますのであえて書いてみることにしました。この他にもSassには、@eachを使った便利な記法などもありますので、もしこの記事の続きを書くとすれば、その辺りの内容にも触れることできればと思っています。API]印象的な文字表現が簡単にできる。stickyの活用とGrid.jsの場合]私の修行時代のお話。新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。