SASSにおける反復処理
この記事ではSASSにおける反復処理について説明します。
SASSで反復処理を行う方法を、実際のコード例を交えて、ステップバイステップで説明します。
YouTube Video
SASSにおける反復処理
SASSにおける反復処理は、コードの重複を避け、柔軟で再利用性の高いスタイルを作るのに役立ちます。
SASSで反復処理を使う理由
反復処理を使用すると、以下のようなメリットがあります。
- コードの再利用性が向上し、同じパターンのスタイルを簡単に生成できます。
- 保守性が向上し、スタイルを一括で変更するのが容易になります。
- エラーの削減が期待できます。
例えば、色の異なるボタンや複数のサイズを持つコンポーネントのスタイルを一括で生成できます。
SASSの反復処理に使用する構文
SASSで反復処理を行う主な構文は以下の通りです。
@forを用いると、数値の範囲を指定して反復処理を行なえます。@eachを用いると、リストまたはマップを使用して反復処理を行なえます。@whileを用いると、特定の条件を満たすまで反復処理を行なえます。
@forを使った反復処理
@forは、指定した数値範囲をもとに繰り返し処理を実行します。
構文
1/*
2@for $i from <start> to <end> {
3 ...
4}
5
6@for $i from <start> through <end> {
7 ...
8}
9*/<start>と<end>には開始と終了の値を指定します。toを使うと終了値を含まず、throughを使うと終了値を含みます。
サンプル
次のコードは、ボーダーの太さを1pxずつ増やしたクラスを自動生成します。
1@for $i from 1 through 5 {
2 .border-#{$i} {
3 border-width: #{$i}px;
4 }
5}- このコードは、ボーダーの太さを1pxずつ増やしたクラスを自動生成します。
@forディレクティブを使って、1から5までの値で繰り返し処理を行っています。
出力されるCSS
1.border-1 {
2 border-width: 1px;
3}
4.border-2 {
5 border-width: 2px;
6}
7.border-3 {
8 border-width: 3px;
9}
10.border-4 {
11 border-width: 4px;
12}
13.border-5 {
14 border-width: 5px;
15}.border-1から.border-5までのクラスが順に生成され、それぞれボーダーの太さが1pxずつ増えます。
@eachを使った反復処理
@eachは、リストやマップを使ってループを実行します。パターン化されたクラスを効率よく生成したいときに便利です。
構文
1/*
2@each $item in <list> {
3 ...
4}
5*/サンプル1：リストを使用した例
以下のコードでは、複数の文字色クラスを生成します。
1@each $color in ("red", "blue", "green") {
2 .text-#{$color} {
3 color: #{$color};
4 }
5}- このコードは、リストにある複数の色に対して文字色クラスを自動生成します。
@eachディレクティブを使って、リスト内の各値を順番に処理しています。
出力されるCSS
1.text-red {
2 color: red;
3}
4.text-blue {
5 color: blue;
6}
7.text-green {
8 color: green;
9}- SASSファイルをCSSに変換すると、リスト内の色ごとに
.text-red、.text-blue、.text-greenのようなクラスが生成されます。
サンプル2：マップを使用した例
マップを使うと、キーと値をペアで扱うことができます。次の例では、ボタンの背景色をマップで定義しています。
1$colors: (
2 primary: #3498db,
3 success: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $hex in $colors {
8 .bg-#{$name} {
9 background-color: #{$hex};
10 }
11}出力されるCSS
1.bg-primary {
2 background-color: #3498db;
3}
4.bg-success {
5 background-color: #2ecc71;
6}
7.bg-danger {
8 background-color: #e74c3c;
9}- SASSファイルをCSSに変換すると、マップのキーごとに
.bg-primary、.bg-success、.bg-dangerのようなクラスが生成されます。
@whileを使った反復処理
@whileは、条件が真である限りループを続けます。
構文
1/*
2@while <condition> {
3 ...
4}
5*/サンプル
例えば、フォントサイズを段階的に増やす場合、次のように記述できます。
1$i: 1;
2
3@while $i <= 5 {
4 .font-#{$i} {
5 font-size: #{$i}rem;
6 }
7 $i: $i + 1;
8}- フォントサイズを段階的に増やす場合、
@whileディレクティブを使って繰り返し処理が可能です。変数$iを使い、1から5までの値でクラスを自動生成しています。
出力されるCSS
1.font-1 {
2 font-size: 1rem;
3}
4.font-2 {
5 font-size: 2rem;
6}
7.font-3 {
8 font-size: 3rem;
9}
10.font-4 {
11 font-size: 4rem;
12}
13.font-5 {
14 font-size: 5rem;
15}- SASSファイルをCSSに変換すると、1remから5remまで段階的にフォントサイズが増えるクラスが自動生成されます。
応用例：反復処理とネストの組み合わせ
反復処理とSASSのネスト機能を組み合わせることで、さらに高度なスタイル生成が可能です。
サンプル
以下は、ボタンの背景色とホバー時の色をまとめて定義する例です。
1@use "sass:color";
2
3$colors: (
4 primary: #3498db,
5 success: #2ecc71,
6 danger: #e74c3c
7);
8
9@each $name, $hex in $colors {
10 .btn-#{$name} {
11 background-color: $hex;
12 color: white;
13
14 &:hover {
15 background-color: color.scale($hex, $lightness: -10%);
16 }
17 }
18}- 反復処理とSASSのネスト機能を組み合わせると、ボタンの背景色とホバー時の色をまとめて生成できます。マップ内の色ごとに
.btn-クラスを作成し、ネストで:hoverスタイルを定義しています。
出力されるCSS
1.btn-primary {
2 background-color: #3498db;
3 color: white;
4}
5.btn-primary:hover {
6 background-color: #2980b9;
7}
8.btn-success {
9 background-color: #2ecc71;
10 color: white;
11}
12.btn-success:hover {
13 background-color: #27ae60;
14}
15.btn-danger {
16 background-color: #e74c3c;
17 color: white;
18}
19.btn-danger:hover {
20 background-color: #c0392b;
21}- SASSファイルをCSSに変換すると、各ボタンの背景色とホバー時の色が自動生成され、ネストで:hoverスタイルもまとめて定義されます。
反復処理の注意点
反復処理を利用する際には、以下の点に注意すると、より効率的で可読性の高いコードが書けます。
-
ネストが深くなりすぎないようにする 過度な入れ子構造は可読性を下げるため、必要最低限に留めます。
-
パフォーマンスの考慮 繰り返しで生成されるクラスが多すぎると、CSSが肥大化する可能性があります。
-
適切な変数名を使用
$iや$itemなどの変数は、目的に応じて意味のある名前にすると理解しやすくなります。
まとめ
SASSの反復処理を活用すると、効率的でメンテナンスしやすいスタイル設計が可能になります。特に@for、@each、@whileを使い分けることで、動的かつ柔軟なCSSを生成できます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。