SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。
Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】配列とは、複数の値を1つの変数でまとめて扱えるデータ構造のことです。
Sassでは配列をリストと呼びます。
この記事では、Sassでリスト（配列）を利用する方法を徹底的に紹介します。
もくじ
リスト（List）とは？
Sassにおけるリストは、順番のある値の集合体（配列）です。
カンマやスペースで区切った複数の値を１つの変数にまとめて保持できます。
リストを使うメリット
リスト（配列）を使うと下記のようなメリットがあります。
- 繰り返し処理（@each）と組み合わせて効率的にCSSを生成できる
- 色やサイズなど、複数の値を一括で管理・変更できる
- リスト内で要素ごとの値の取得・追加・検索などの操作が可能
リストと似たデータ構造体として、マップ（連想配列）があります。
マップはインデックスではなく任意の文字列をキーとして並べた連想配列です。
マップについての詳しい説明は下記の記事に紹介しています。
Sassで配列を使おう｜マップ（連想配列）を徹底的に使いこなす！リストを定義する
リストを定義する方法は下記の通りです。
scss記述例｜リストを定義する
$colors: red, blue, green; // カンマ区切りで複数の値を保持 $font-sizes: 12px 14px 16px; // スペース区切りで複数の値を保持
$配列名に対して、値（文字列や数値）をセパレーター（,・半角スペース）で区切って定義します。
セパレーターとは？
配列の要素と要素を区切るものをセパレーターと言います。
Sassでリストは、通常、カンマ（,）区切りか半角スペース区切りで定義します。
この違いは見た目だけでなく、関数の動作にも影響します。
たとえば配列の追加をするappend()や配列の結合をするjoin()でセパレーターを指定する引数が必要になります。
私のオススメはカンマ区切りです。
セパレーターについて、詳しくは下記の記事で紹介しています。
Sassで配列を使おう｜リスト（配列）のセパレーターについて考えてみたセパレーターを確認する方法
リストのセパレーターを確認するには、list-separator()関数を利用します。
関数の引数に配列を入れると、結果（comma=半角コンマ区切り、space=半角スペース区切りなど）が返ります。
scss記述例｜セパレーターを確認する
$color_sep: list-separator($colors); // 出力：comma $font_sep:list-separator($font-sizes); // 出力：space
リストの要素を取得する
Sassのリストでは、JavaScriptやPHPの配列のように配列内の個々の値を取り出したり、全体の長さを取得するなど、様々な情報を取得できます。
配列内のn番目の要素を取得する
リストの中から、指定した順番の要素を取り出します。
順番＝インデックスは、JavaScriptやPHPの配列が０から始まるのに対し、Sassのリストでは１から始まります。
nth( $list, n );
解説
$list… 配列名n… 指定する配列内のインデックス（１から数えた数値）
scss記述例
$colors: red, blue, green; // １番目：red, ２番目：blue, ３番目：green $second: nth($colors, 2); // → blue
リストの要素数を取得する
リストの中にいくつ要素があるかを取得します。
下記のように記述すると指定された配列の要素数を返します。
length( $list );
解説
$length… リストを指定する
scss記述例
$colors: red, blue, green; $count: length($colors); // → 3
リストに要素を追加する
Sassでは、既存のリストに新しい要素を追加するためappend()関数を使用します。
append( $list, $value, $separator );
$list… 要素を追加するリスト。$value… 追加したい要素。$list末尾に追加される。$separator… セパレーターの指定（comma｜space｜slash｜auto）※省略可auto・無記入の場合は、$listのセパレーターを自動で取得して設定する。明示的にセパレーターが指定されている場合は、$listのセパレーターが指定したものに変更される。
scss記述例
$colors: red blue yellow; // スペース区切りのリスト $colors: append($colors, green); // $separatorは未設定なので自動的にスペースになる @debug $colors; // デバッグ出力 // 出力: red blue yellow green $sizes: 10, 12, 14; // カンマ区切りのリスト $sizes: append($sizes, 16); // $separatorは未設定なので自動的にカンマになる @debug $sizes; // デバッグ出力 // 出力: 10, 12, 14, 16 $fonts: serif, sans-serif, monospace; // カンマ区切りのリスト $fonts: append($fonts, cursive, auto); // $separatorはautoなので自動的にカンマになる @debug $fonts; // デバッグ出力 // 出力: serif, sans-serif, monospace, cursive $heights: 100px 200px 300px; // スペース区切りのリスト $heights: append($heights, 400px, comma); // $separatorをカンマに指定する @debug $heights; // デバッグ出力 // append()の結果セパレーターがスペース⇒カンマに変更 // 出力: 100px, 200px, 300px, 400px $aligns: left, center, right; // カンマ区切りのリスト $aligns: append($aligns, justify, space); // $separatorをスペースに指定する @debug $aligns; // デバッグ出力 // append()の結果セパレーターがカンマ⇒スペースに変更 // 出力: left center right justify
セパレーターに注意！
append()の第三引数であるセパレーターがautoあるいは無記入であった場合は$listのセパレーターが引き継がれます。
セパレーターを指定すると、リストのセパレーターが更新されるので、リストのセパレーターを確認して利用するか、予めプロジェクト内のセパレーターを統一しておくと良いでしょう。
リストの要素を検索する
リストを扱っていると、「この値が含まれているか？」「何番目にあるか？」といった要素の検索が必要になる場面が出てきます。
PHPではin_array関数で上記のような検索が可能ですが、Sassではindex関数を利用します。
index( $list, $value );
解説
$list… 要素を検索するリスト。$value… 検索したい内容。型まで含めた完全一致で評価される。- 戻り値は
$valueと完全一致する値が最初に$listに検出される配列内のインデックス。検出されない場合はnullが返る。
scss記述例
$list: (red, blue, green, green); $index-of-green: index($list, green); // 最初に"green"が検出されるのは３番目 @debug $index-of-green; // 出力：3
配列内に値が存在するか確認する方法
リスト内に値が存在するか確認したい時は、下記のような条件分岐を書けばOKです。
scss記述例
$list: (red, blue, green, green);
$value: green;
@if index( $list, $value ) != null {
// $list内に$valueがあった時
@debug "true";
} @else {
// $list内に$valueがなかった時
@debug "false";
}
リストを結合・統合する
複数のリストをつなぎ合わせたり、セットにして構造化したいときに便利なのがjoin()とzip()です。
これらを使えば、Sassのリストをさらに柔軟に再構成し、動的で扱いやすいデータ構造を作ることができます。
複数のリストを１つのリストに統合する
２つのリストを結合して１つのリストにまとめます。
２つ目のリストは１つ目のリストの末尾に追加されます。
join( $list1, $list2, $separator );
解説
$list1… １番目の配列。$separator: auto だった場合、この配列のセパレーターが適用される。$list2… ２番目の配列。$separator… セパレーターの指定（comma｜space｜slash｜auto）※省略可auto・無記入の場合は、$list1のセパレーターを自動で取得して設定する。明示的にセパレーターが指定されている場合は、セパレーターが指定したものに変更される。
scss記述例
$list1: red, blue; $list2: green, yellow; $joined: join($list1, $list2); // → red, blue, green, yellow // セパレーターを変更する $spaced: join($list1, $list2, space); // → red blue green yellow
セパレーターに注意！
$list1と$list2のセパレーター合致していない時、リストを結合するとセパレーターは$list1のものを踏襲します。
セパレーターが明示的に指定されていないと、セパレーターが意図せず変更される可能性があるので、リストのセパレーターを統一するか、join()使用時に明示的に指定するようにしましょう。
複数のリストをインデックスごとにまとめて統合し、多次元配列にする
２つ以上のリストをインデックスごとに統合し、サブリストを作成してネストします。
各インデックスの要素同士がセットになり、構造化された多次元配列形式のデータとして扱うことができます。
リスト同士のインデックス数が合致しない場合、最短のリストのインデックス数に合わせて新リストが生成されるため、最長のリストの差分の要素は無視されます。
zip($list1, $list2, ...);
解説
$list1… １番目の配列$list2… ２番目の配列
scss記述例
$list1: 1 2 3; // スペース区切りのリスト。 $list2: "a", "b", "c", "d"; // カンマ区切りのリスト。要素数が4あっても $list1 の要素数が3なので 'd' は無視される $list3: red, green, blue, yellow; // カンマ区切りのリスト。要素数が4あっても $list1 の要素数が3なので 'yellow' は無視される $zipped: zip($list1, $list2, $list3); // インデックスごとにリストを統合 @debug $zipped; // 1 "a" red, 2 "b" green, 3 "c" blue @debug nth($zipped, 1); // (1 "a" red) @debug nth($zipped, 2); // (2 "b" green) @debug nth($zipped, 3); // (3 "c" blue)
セパレーターに注意！
統合する各リストのセパレーターにの違いは関係ありません。
親リストのセパレーターはカンマ区切りとなります。
子リストのセパレーターはスペースになります。
リストをループ処理する
Sassでは、リストの要素を繰り返して順番に処理（ループ）するために@eachディレクティブを使います。
ループを活用することで、同じようなスタイルを効率よく自動生成でき、メンテナンス性も大きく向上します。
@each $var in $list{}
解説
$var… 繰り返される配列内の要素を置き換えるための任意の変数。利用時は#{$var}と記述する。$list… 繰り返し対象の配列{}… 繰り返し処理を書く部分
scss記述例
$colors: blue, red, green;
@each $color in $colors {
.text-#{$color} {
color: $color;
}
}
出力されるCSS
.text-blue {
color: blue;
}
.text-red {
color: red;
}
.text-green {
color: green;
}
最後に
Sassのリストは、単なる値の集合であるだけでなく、構造的で柔軟なデータ管理の手段です。
この記事では、リストの定義から操作、ループ処理までを幅広く紹介してきました。
また、リストを使いこなすことで、可読性が高く、保守性に長け、再利用性の高いスタイル設計が可能になります。
リストの様々な使い方を習得して、CSSを構造的でスマートにコーディングしていきましょう！
