tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。Scss]前回の記事に続いて、今回もSassの記事になります。前回はSassのfor文を使って、指定した一定のパターンを持つclassを複数作成する、ということについて書きました。使って、複数の値を順番に適用したclassを作成する方法について書いていきたいと思います。何ができるかというと、次の様なことになります。して、4つの値を定義しています。これを、3行目にあるSassの@eachを使ってコンパイルさせることで、次の様な4つのclassを書き出すことができます。定義した4つの値が順番に展開されて、4つのclassが出来ていますね。Webサイトで、ヘルパークラス(補助的に付与するクラス)を量産する場合などに役立ちそうです。「手動で書いた方が効率いいのでは...?」と思う方もいるかもしれません。(...書いている私自身、そう思いました。)そこでご紹介したいのが、次のセクションの内容です。「複数の値を、複数の項目に」それぞれ割り当ててコンパイルさせることもできたりします。次のセクションでは、上記の書き方を応用して「異なる複数の値」を持たせたclassを、一発で書き出す方法について書いていきます。5つの異なる値を持ったclassを、一発で書き出す方法たとえばWebサイトを制作していて、サイズが決定した小、中、大の3つのボックスのcssを、効率よく書き出したい場合。}}↑これをコンパイルすると、なんと次の様に見事にそれぞれの値を割り当てた3つのボックス用のcssができてしまう、というわけです。使って順番に割り当てる上のセクションで書いたことのもう少し詳しい説明です。auto↑小、中、大サイズのボックス用に、3つ定義しています。使って、順番に割り当てることで、3種類のボックス用cssが見事にコンパイルできてしまう、ということです。$margin↑左から順にこれら5つの変数にそれぞれ対応して、コンパイルされると小、中、大サイズの3つのボックス用classとして展開される、というわけです。100%;}これを使いこなすと、かなり便利にSass(SCSS)を書いていける気がしますね。・値を定義する箇所と・展開される式をそれぞれ一箇所で定義しておけるので、メンテナンス性の面でも効率が良さそうですね。公式サイトの解説ページSass公式サイトの、@eachについての解説ページは以下になります。使うことができる各種の書き方が、サンプルコード付きで載っています。アイコンフォント用のclassを複数作成することを想定した例などもあり、参考になります。異なる複数の値を持たせたclassを、一発で書き出す方法について書きました。cssプリプロセッサの定番として、すっかり定着している感のあるSass。前回ご紹介した@forや、今回の@eachを適切に使うことで、より効率の良いWeb制作ができるかと思います。@forや@eachを使おう、と思うと「どう効率よくcssを書くか?」という発想に行き着きます。すると、自然と「cssを設計する」という概念にも行き着くと思います。「なんとなく漠然とcssを書いている」状態と「cssを設計して書いている」状態、どちらが良いかは明白ですよね。当サイトでは、今後もWebデザイン、Web制作に関する記事を引き続き書いていきます。Sassに関する記事も、何かおもしろいサンプルを思いついたら、また書いていきたいと思っています。印象的な文字表現が簡単にできる。window.matchMedia]新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。AVIF]私の修行時代のお話。