SASSにおけるリスト
この記事ではSASSにおけるリストについて説明します。
SASSのリストの基本から応用までを解説し、実用的な例を示します。
YouTube Video
SASSにおけるリスト
SASSは、CSSの拡張として、プログラミングのような便利な機能を提供します。その中でもリストは、スタイルを動的に定義する際に非常に役立つ機能です。
SASSリストとは？
SASSのリストは、カンマ（,）またはスペースで区切られた値の集合です。CSSのプロパティに複数の値を渡す場合や、繰り返し処理を行う際に使われます。
1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;リストの主な特徴として、次の点があります。
- リスト内の値は数値、文字列、色など、任意のデータ型を含められます。
- カンマ区切りとスペース区切りは使用方法に応じて選択可能です。
リストを使ったスタイル定義の基本例
以下はリストを使って簡単なボーダースタイルを動的に生成する例です。
1@use "sass:list";
2
3$border-widths: 1px, 2px, 3px;
4
5.border-example {
6 @for $i from 1 through list.length($border-widths) {
7 &-#{list.nth($border-widths, $i)} {
8 border-width: list.nth($border-widths, $i);
9 }
10 }
11}コンパイル結果
1.border-example-1px {
2 border-width: 1px;
3}
4
5.border-example-2px {
6 border-width: 2px;
7}
8
9.border-example-3px {
10 border-width: 3px;
11}sass:listモジュールのnth()関数を使うことで、リスト内の特定の値を取り出すことができます。
リストの操作
sass:listモジュールではリストを操作するための関数を提供しており、要素の取得や追加などを簡単に行えます。
要素を取得する：nth()
nth()は要素を取得する関数です。
1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red- このコードでは、
nth()を用いて指定したインデックスの値を取得しています。
インデックスを調べる：index()
index()は、リスト内で要素の位置を返す関数です。
1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3- このコードでは、
index()を用いて要素blueがリストの3番目にあることを取得しています。
長さを取得する：length()
length()は長さを取得する関数です。
1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3- このコードでは、
length()を用いてリスト内の値の個数を取得しています。
要素を追加する：append()
append()は要素を追加する関数です。
1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle- このコードでは、
append()を用いてリストに値を追加しています。
要素を置き換える：set-nth()
set-nth()は、指定した位置の要素を別の値に置き換える関数です。
1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue- このコードでは、
set-nth()を用いて2番目の要素をyellowに置き換えています。
リストを結合する：join()
join()は、2つのリストを結合する関数です。
1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d- このコードでは、
join()を用いて2つのリストを1つに結合しています。
リストを組み合わせる：zip()
zip()は、複数のリストを要素ごとにまとめる関数です。
1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)- このコードでは、
zip()を用いて名前と年齢をペアとして組み合わせています。
ネストしたリスト
リストはネストさせることも可能で、2次元配列のように扱えます。
1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red- このように複雑なデータ構造を扱うことで、高度なスタイル生成が可能です。
実用例：グラデーションの生成
リストを活用してグラデーションを効率的に生成する例を示します。
1@use "sass:list";
2@use "sass:math";
3
4$colors: red, orange, yellow, green, blue;
5
6@function gradient($colors) {
7 $gradient: ();
8 $len: list.length($colors);
9
10 @for $i from 1 through $len {
11 // build "color percent%" string with interpolation
12 $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13 $gradient: list.append($gradient, $item);
14 }
15
16 @return $gradient;
17}
18
19.background {
20 background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}コンパイル結果
1.background {
2 background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}-
このコードは SCSS でリストを使ってグラデーションを自動生成する例 です。
$colorsにグラデーションに使う色をリストとして定義しています。gradient()関数では色の数に応じて、各色に均等な割合（位置）を計算して付与し、グラデーション用のリストを作成します。.backgroundクラスではlinear-gradientを使い、生成した色リストを結合して横方向のグラデーションを適用しています。
-
色リストの長さに応じて位置が自動で計算される ため、色を追加・変更しても均等なグラデーションが簡単に作れます。
注意点とベストプラクティス
リストを利用するにあたって次の点を考慮できます。
-
リストの区切りタイプ カンマ区切りとスペース区切りは別物として扱われるため、状況に応じて適切に選ぶ必要があります。
-
リストのサイズ 動的にリストを操作する際には、
length()でサイズを確認するのが安全です。 -
ネストリストの管理 ネストリストを扱う場合は、インデックス操作を慎重に行うことでエラーを防ぐことができます。
結論
SASSのリストは、スタイルを動的に定義したり複雑なデザインを効率的に管理したりするための強力なツールです。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。