SassはCSSをより強力にするためのツールで、変数やミックスイン、ネストなど多くの機能を提供しています。その中でも、繰り返し処理を可能にする@forディレクティブは、特定の範囲内でスタイルを動的に生成する際に非常に便利です。本記事では、@forを活用する方法について具体例を交えながら解説します。
Sassの@forとは？
Sassの@forディレクティブは、指定した範囲内で繰り返し処理を行うための機能です。これにより、数値や変数を使って効率的にスタイルを生成することができます。基本的な構文は以下の通りです。
@for $var from <start> through <end> {
// 繰り返し処理の内容
}ここで、$varは繰り返し中に使用する変数、<start>は開始値、<end>は終了値を表します。
例1: クラス名に基づく繰り返し
まずは基本的な例として、1から5までの数値に基づいてクラス名を生成する方法を見てみましょう。
@for $i from 1 through 5 {
.item-#{$i} {
width: 20px * $i;
}
}このコードは、以下のようなCSSを生成します。
.item-1 {
width: 20px;
}
.item-2 {
width: 40px;
}
.item-3 {
width: 60px;
}
.item-4 {
width: 80px;
}
.item-5 {
width: 100px;
}このように、@forを使うことで、繰り返し処理を簡潔に記述できます。
例2: レスポンシブデザインのための繰り返し
次に、レスポンシブデザインのために複数のメディアクエリを動的に生成する方法を見てみましょう。
$sizes: (320px, 480px, 768px, 1024px);
@for $i from 1 through length($sizes) {
$size: nth($sizes, $i);
@media (max-width: #{$size}) {
body {
font-size: 10px * $i;
}
}
}このコードは、以下のようなCSSを生成します。
@media (max-width: 320px) {
body {
font-size: 10px;
}
}
@media (max-width: 480px) {
body {
font-size: 20px;
}
}
@media (max-width: 768px) {
body {
font-size: 30px;
}
}
@media (max-width: 1024px) {
body {
font-size: 40px;
}
}このようにして、異なるサイズに対応したスタイルを一度に生成できます。
例3: fromとthroughの違い
Sassの@forにはthroughとtoの2種類の範囲指定方法があります。それぞれの違いを見てみましょう。
- through：終了値を含む範囲。
- to：終了値を含まない範囲。
例えば、以下のように使います。
// to の例
@for $i from 1 to 5 {
.item-#{$i} {
width: 20px * $i;
}
}このコードは、以下のようなCSSを生成します。
.item-1 {
width: 20px;
}
.item-2 {
width: 40px;
}
.item-3 {
width: 60px;
}
.item-4 {
width: 80px;
}1 to 5は1, 2, 3, 4という範囲を表しますが、1 through 5を使うと1, 2, 3, 4, 5という範囲になります。
まとめ
Sassの@forディレクティブを使うことで、繰り返し処理を簡潔かつ効率的に記述できます。クラス名の生成やメディアクエリの自動生成など、様々な用途に応じて柔軟に活用できます。ぜひ自分のプロジェクトに取り入れて、コーディングを効率化してみてください。
