Sassで同じようなパターンのコードを繰り返し使用する際に、効率的にコードを生成できるループ処理について解説します。
Web制作では、ユーティリティークラス（Utility class）という、要素と要素の余白調整のためにmargin-bottomなどの、特定のスタイルや機能を提供する最小単位のCSSクラスを、異なる間隔で複数定義することがあります。
しかし、異なる間隔のmargin-bottomを手動で管理するのは手間がかかりますし、ミスのリスクも高まります。
こうしたシチュエーションでSassのループ処理が役立ちます。
ループ処理を使用することで、異なる間隔のmargin-bottomを効率的に一括生成し、手動でのミスを減らし、スタイルシートの保守性を向上させ、効率的なコーディングを実現できます。
この記事では、異なる間隔のmargin-bottomユーティリティークラスを効率的に生成する方法を例に、Sassのループ処理の使い方を解説していきます。
なお、SassをCSSにコンパイルするやり方については以下の記事で解説していますので、Sassのコンパイルのやり方がわからない場合は、こちらから環境構築を行なってください。
INDEX
ループ（繰り返し）処理とは？
Sassのループ処理は、同じパターンのコードを繰り返し生成するための機能です。
特に、特定のスタイルや構造を効率的に生成する際に役立ちます。
Sassでは、@each、@for、@whileなどの方法でループ処理を行うことができますが、一般的には@forがよく使われます。
この記事では、ループの回数を指定して直感的に繰り返し処理を行う@forの使い方に焦点を当てて解説していきます。
@forの使い方
以下のが基本的な@forのループ構文です。
Sassの@forを使うと、指定した回数だけループを実行することができます。
$iは変数で、ループ内の現在のインデックスを表します。fromキーワードの後には開始値、throughキーワードの後には終了値を指定します。
ループ内で行いたい処理は、中括弧 {} 内に記述されます。
@for $i from <開始値> through <終了値> {
// ループ内で行いたい処理
}例えば、1から5までの数値に対してループ処理を行い、それぞれの数値に応じたスタイルを生成する場合、以下のように記述します。
@for $i from 1 through 5 {
// ループ内で行いたい処理
}margin-bottomユーティリティクラスの生成
@forを使用して、異なる間隔のmargin-bottomのユーティリティクラスを一括生成します。
以下は、1から5までの数値に対応する.mb-10から.mb-50までのクラスを生成する例です。
変数$iは、ループ内でも使用できます。#{$i * 10}のように計算式も設定することが可能です。
@for $i from 1 through 5 {
.mb-#{$i * 10} {
margin-bottom: #{$i * 10px};
}
}#{$i * 10}の#{}内には、Sassの式が含まれています。この式は$iという変数に10を掛けた結果を表示するために使用されます。#{$}は、Sassの式を展開して変数の値を文字列に埋め込むために使われます。
以下がコンパイルされたCSSです。
このように、ループ処理を使用することで手動でのミスが減り、作業の効率化にも繋がり、スタイルシートの保守性が向上します。
.mb-10 {
margin-bottom: 10px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-50 {
margin-bottom: 50px;
}まとめ
Sassの@forループを使用して異なる間隔のmargin-bottomユーティリティクラスを効率的に生成する方法について解説しました。
この方法を使えば、手動で間隔を調整する手間を省き、スタイルシートの保守性を向上させることができます。また、一貫したデザインパターンを実装する際に役立ちます。
Sassのループ処理を活用することで、繰り返しのコードを簡潔に書くことができ、効率的な開発が可能です。ぜひこの方法を活用して、より効率的で保守性の高いスタイルシートを実現してください。
