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

Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】

Sassでは、スタイルの管理や再利用性を高めるために変数（$colorなど）をよく使います。
しかし、複数の値をまとめて扱いたいときに、毎回別々の変数を定義していたのでは、かえってコードが煩雑になってしまいます。
そんなときに役立つのが配列です。
この記事ではSassで配列として利用できるリストとマップについて紹介します。

Sassにおける配列の基本

配列とは、複数の値を1つの変数でまとめて扱えるデータ構造のことを言います。
Sassでは配列を扱うためにリストとマップという方法があります。

Sassの配列は、見た目に影響しないがCSSの生成に役立つ裏方データとして活用されることが多く、設計の柔軟性を大きく高めてくれます。

配列はCSSに出力されないメタ情報である

Sassの配列（リスト・マップ）は、基本的にはCSSにはそのまま出力されません。
つまり、スタイルを記述するための「補助情報」や「制御用のデータ」として使われます。

$colors: red, blue, green;

上記のようなリストが定義されていても、それだけではCSSには出力されません。
このリストをループ処理で展開したり、特定の値を取り出してプロパティに適用することで出力されます。
配列（リスト・マップ）を利用すると、コーディングの自動化や省力化が可能になります。

@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

リスト（List）とは？

リストは、順番のある値の集合体（配列）です。
カンマやスペースで区切った複数の値を１つの変数にまとめて保持できます。

scss記述例｜リストを定義

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

リストの詳しい使い方

リスト（配列）についての詳しい使い方や使用例は下記の記事で紹介しています。

• リストを定義する
  $list: ( 値, 値, 値, ... )
• リストの要素を取得する
  nth( $list, n )
• リストに要素を追加する
  append( $list, $value, $separator )
• リストの要素を検索する
  index( $list, $value )
• リストの要素数を取得する
  length( $list )
• リストを結合・統合する
  join( $list1, $list2, $separator ) zip( $list1, $list2, … )
  
  

Sassで配列を使おう｜リスト（配列）を徹底的に使いこなす！

マップ（Map）とは？

マップは、キーと値のペアをセットで管理する連想配列です。
キー（インデックス）に文字列を利用し、値に対してわかりやすい名前をつけて保持することができます。

scss記述例｜マップを定義

$theme-colors: (
// キー: 値; として記述する
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);

マップの詳しい使い方

マップ（連想配列）についての詳しい使い方や使用例は下記の記事で紹介しています。

• マップを定義する
  $連想配列名: ( キー: 値, キー: 値, キー: 値, ... )
  
• マップから値を取得する
  map.get( $map, $key )
• マップに要素を追加・更新する
  map.set( $map, $key, $var ) map.merge( $map, ( $key: $var ) )
• 複数のマップを結合する
  map.merge( $map, ( $key: $var ) )
  
• マップから要素を削除する
  map.remove( $map, $key )
  
• マップのキーを検索する
  map.has-key( $map, $key )

Sassで配列を使おう｜マップ（連想配列）を徹底的に使いこなす！

最後に

Sassでは、複数の値をまとめて扱える「リスト」と「マップ」という便利な機能が用意されています。
どちらもCSSには直接出力されない補助的なデータ構造ですが、うまく活用することでコードの再利用性・可読性・保守性が大きく向上します。
配列・連想配列を使いこなして、CSSを構造的でスマートにコーディングしていきましょう。