Sassで配列を使おう｜リスト（配列）のセパレーターについて考えてみた

投稿日：2025/07/01 ｜最終更新：2025/06/30
CSS・Sass
scss, リスト, 配列

SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。

Sassでリスト（配列）を定義する時、通常はカンマ・スペースで区切ります。
この記事では、他にはどんなセパレーターがあるのか、またどのセパレーターを利用するのが適切なのかを考察します。

Sassのリストのセパレーターについて

Sassのリストとは？

Sassにおけるリストとは、順番のある値の集合体（配列）です。
$配列名に対して、値（文字列や数値）をセパレーター（,・半角スペース）で区切って定義します。

scss記述例｜リストを定義する

$colors: red, blue, green;   // カンマ区切りで複数の値を保持
$font-sizes: 12px 14px 16px; // スペース区切りで複数の値を保持

セパレーターとは？

配列の要素と要素を区切るものをセパレーターと言います。

この違いは見た目だけでなく、関数の動作にも影響します。
たとえば配列の追加をするappend()や配列の結合をするjoin()でセパレーターを指定する引数が必要になります。

セパレーターの種類

Sassのリストのセパレーターには下記の３種類があります。

名前	値	説明
comma	`,`	半角カンマ
space		半角スペース
slash	`/`	半角スラッシュ

カンマ区切り

最も推奨される形式のセパレーター
関数（　nth(),　join()など）での扱いが明確
　list-separator()で　commaとして判定される

$colors: red, blue, green;

スペース区切り

CSSプロパティ（　margin,　paddingなど）と親和性が高い
セパレーターが曖昧になりやすく、括弧との組み合わせで誤動作することもある

$font-sizes: 12px 14px 16px;

スラッシュ区切り

数値の演算（除算）とみなされることが多いので非推奨
ほとんどのリスト関数（　nth(),　join()など）と組み合わせると 意図しない動作またはエラーになりやすい。

$aspect-ratio: 16 / 9; // 実際には「16 ÷ 9」として評価されることが多い

セパレーターを確認する方法｜list-separator()

リストのセパレーターを確認するには、list-separator()関数を利用します。
関数の引数に配列を入れると、結果（comma=半角コンマ区切り、space=半角スペース区切り、slash=半角スラッシュ区切り）が返ります。

scss記述例｜セパレーターを確認する

$color_sep: list-separator($colors);       // 出力：comma
$font_sep:list-separator($font-sizes);     // 出力：space
$aspect_sep:list-separator($aspect-ratio); // 出力：slash

セパレーターにはなにを使うべき？

Sassのセパレーターにはカンマ・スペース・スラッシュを扱えますが、実務ではカンマ区切りを推奨します。
その理由は以下の通りです。

見た目に明確な区切りがある
カンマが入っていることで、各要素が視覚的にはっきり分かれ、読みやすくなります。
```
// カンマ区切り（見やすい）
$colors: red, blue, green;

// スペース区切り（区切りが見えにくい）
$colors: red blue green;
```
カッコをつけると複数要素ではなく単一要素として認識されてしまう
スペース区切り＋カッコ付きのリストは Sass によって1要素のネストリストとして扱われる可能性があります。
```
// スペース区切り + 括弧あり → 1要素と判定される
$list: (red blue green);

// カンマ区切りなら問題なし
$list: (red, blue, green);
```
リスト関数での扱いが安定している
Sassの多くのリスト処理関数（nth()やappend()）は、カンマ区切りを前提に安定して動作するよう設計されています。
他のツールやCSS設計との親和性
多くのSass設計ガイドラインやユーティリティ系フレームワーク（例：Bootstrap, Foundation）でも、データ構造にはカンマ区切りのリストを使うのが一般的です。

結論：基本は「カンマ区切り」で統一しよう

セパレーターが混在すると、join()やappend()などのリスト関数を利用した際にリストのセパレーターが変更されるなど、予期せぬ処理が行われる可能性があります。
カンマ区切りを使えば、可読性・再利用性・関数の安定性が揃い、Sassの設計ミスを防ぐのに役立ちます。
特にプロジェクトが大規模化する場合は、明示的で安全なカンマ区切りを基本スタイルとして採用するのがベストです。