Sassで配列を使おう｜マップ（連想配列）を徹底的に使いこなす！
SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。
Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】Sassにおけるマップ（map）とは、「キー（key）」と「値（value）」のペアを格納するデータ構造のことです。
他の言語でいう連想配列やオブジェクトに相当し、Sassの中で変数を整理して管理するのにとても便利な仕組みです。
この記事では、Sassでマップ（連想配列）を利用する方法を徹底的に紹介します。
もくじ
マップ（Map）とは？
Sassにおけるマップとは、キーと値のペアをセットで管理する連想配列です。
キー（インデックス）に文字列を利用し、値に対してわかりやすい名前をつけて保持することができます。
scss記述例｜マップを定義
$theme-colors: ( // キー: 値; として記述する primary: #007bff, secondary: #6c757d, success: #28a745 );
マップを使うメリット
マップ（連想配列）を使うと、下記のようなメリットがあります。
- 意味のある名前で値を管理できる（可読性が高い）
- 順序に依存せず値を取得できる
- 階層的な構造（多次元配列）でもわかりやすく対応できる
- 繰り返し処理（
@each）と組み合わせて効率的にCSSを生成できる - 色やサイズなど、複数の値を一括で管理・変更できる
- マップ内で要素ごとの値の取得・追加・検索などの操作が可能
マップと似たデータ構造体として、リスト（配列）があります。
リストはキーではなく１から始まる数字のインデックス（順番）をもとに並べた配列です。
リストについての詳しい説明は下記の記事に紹介しています。
Sassで配列を使おう｜リスト（配列）を徹底的に使いこなす！マップを定義する
マップを定義する方法は下記の通りです。
scss記述例
// 連想配列の場合 $colors: (
// キー: 値 primary: #ff5733, secondary: #4ECCA3, danger: #e74c3c ); // 多次元連想配列の場合 $themes: (
// キー: 値 dark: (
// キー: 値 background: #333, text: #eee #fff, // 値としてスペース区切りのリストを利用可能
sizes: ( 100px, 200px, 300px ) ), light: ( background: #eee, text: #333 #000, // 値としてスペース区切りのリストを利用可能
sizes: ( 150px, 300px, 450px ) // 値としてカンマ区切りのリストを使用する時は()で包む ) );
マップのセパレーターは常にカンマ区切り
Sassにおけるマップは、上記のようにキーと値のペアを常にカンマで区切って定義する必要があります。
この,は文法上必須であり、省略したりスペースで代用することはできません。
ただし、値の中にスペース区切りのリストを入れることは可能です。
値の中でカンマ区切りのリストを利用する時は()で包む必要があります。
リストのセパレーターについて、詳しくは下記の記事で紹介しています。
Sassで配列を使おう｜リスト（配列）のセパレーターについて考えてみたmap関連関数とmapモジュール
Sassのマップについては、map-get()やmap-merge()などの関数がありますが、2025年現在では関数ではなくmapモジュールの利用が推奨されており、map関連の関数はおそらく今後廃止されるようになると思います。（参考：https://github.com/sass/sass/blob/main/accepted/module-system.md）
既存のプロジェクトではmap関連関数を利用している場合もあると思いますが、可能であればmapモジュールの利用へ移行を行うと良いと思います。
マップから値を取得する
Sassのマップから特定の値を取り出すには、map-get()関数またはmap.get()メソッドのいずれかを使います。
どちらも同様の結果を返しますが、使い方と使い分けに注意が必要です。
【非推奨】map-get( $map, $key );
map.get()メソッドを利用する書き方への移行が推奨されています。
解説
$map… マップの配列名$key… 取得したい値とペアになるキー。型も含めて完全一致で指定する必要がある。
scss記述例
$colors: ( primary: #ff5733, "secondary": #4ECCA3, // キーは "secondary"（文字列）
error: ( danger: #ff0000, warning: #fefa51 ) // 値に更にマップが入る（多次元連想配列） ); $primary: map-get( $colors, primary );
// キーが完全一致するので成功：出力 ⇒ #ff5733 $secondary1: map-get( $colors, secondary );
// キーが完全一致しないのでエラーになる
$secondary2: map-get( $colors, "secondary" );
// キーが完全一致するので成功：出力 ⇒ #4ECCA3
$error-danger: map-get( map-get( $colors, error ), danger );
// ネストされているマップを複数回map-get()して値を取得：出力 ⇒ #ff0000
※キーは型も含めて完全一致しなければなりません。文字列で定義したキーは文字列で指定しましょう。
※多次元連想配列の場合、map-get()を複数回利用することで値を取得できます。
【推奨】map.get( $map, $key1, $key2... );
Dart Sass推奨の書き方です。sass:mapモジュールを読み込んだ上で利用しましょう。
解説
$map… マップの配列名。省略不可。$key1… 取得したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略不可。$key2… 取得したい値とペアになる第二のキー。型も含めて完全一致で指定する必要がある。省略可。
scss記述例
@use "sass:map"; // mapモジュールをインポート $colors: ( primary: #ff5733, "secondary": #4ECCA3, // キーは "secondary"（文字列）
error: ( danger: #ff0000, warning: #fefa51 ) // 値に更にマップが入る（多次元連想配列） ); $primary: map.get( $colors, primary );
// キーが完全一致するので成功：出力 ⇒ #ff5733 $secondary1: map.get( $colors, secondary );
// キーが完全一致しないのでエラーになる $secondary2: map.get( $colors, "secondary" );
// キーが完全一致するので成功：出力 ⇒ #4ECCA3
$error-danger: map.get( $colors, error, danger );
// キーを続けて指定する。：出力 ⇒ #ff0000
※キーは型も含めて完全一致しなければなりません。文字列で定義したキーは文字列で指定しましょう。
※多次元連想配列の場合、$key1に続けて$key2を記述することで値を取得できます。
マップの要素数を取得する
マップの中にいくつ要素（キー・値ペア）があるかを取得します。
下記のように記述すると指定された配列の要素数を返します。
length( $map );
解説
$map… マップを指定する
scss記述例
$setting: ( color: red, size: large, weight: bold ); $count: length( $setting ); // → 3
マップに要素を追加・更新する
Sassのマップに後からキーと値を追加・上書きするには、map-merge()関数や、マップモジュールを利用したmap.set()メソッドまたはmap.merge()メソッドを使います。
これにより、より柔軟で再利用性の高いスタイル設計が可能になります。
【非推奨】map-merge( $map, ( $key1: $var1, $key2: $var2... ) );
値を追加したり更新することができる関数です。map.merge()メソッドを利用する書き方への移行が推奨されています。
解説
$map… マップの配列名。省略不可。$key1… 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略不可。$var1… 追加または更新したい値。省略不可。$key2… 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略可。$var2… 追加または更新したい値。省略可。
※３つ以上のキー: 値ペアを追加・更新したい場合は、$key2: $var2の後に続けて,で区切って記述する。
scss記述例
$settings: ( color: red, size: 16px ); $settings: map-merge($settings, (weight: bold) ); // $keyが新規追加されるので値が追加される // 出力：(color: red, size: 16px, weight: bold); $settings: map-merge($settings, (size: 18px) ); // $keyが既存のキーと完全一致するので値が更新される // 出力：(color: red, size: 18px, weight: bold); $settings: map-merge($settings, (family: serif, color: blue ) ); // $keyが複数新規追加されるので複数の処理が行われる // 出力：(color: blue, size: 18px, weight: bold, family: serif );
※キーが既存のキーと完全一致する場合は値が更新されます。
※キーが既存のキーと完全一致しない場合はキー: 値のペアが新規追加されます。
【推奨】map.set( $map, $key, $var );
Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。
map.set()メソッドでは、単一のキー・値ペアを新規追加または更新することができます。
複数のキー・値ペアを操作したい場合は、map.merge()メソッドを利用しましょう。
解説
$map… マップの配列名。省略不可。$key… 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略不可。$var… 追加または更新したい値。省略不可。
scss記述例
@use 'sass:map'; $settings: ( color: red, size: 16px ); $settings: map.set($settings, weight, bold ); // $keyが新規追加されるので値が追加される // 出力：(color: red, size: 16px, weight: bold); $settings: map.set($settings, size, 18px ); // $keyが既存の値と完全一致するので値が更新される // 出力：(color: red, size: 18px, weight: bold);
※キーが既存のキーと完全一致する場合は値が更新されます。
※キーが既存のキーと完全一致しない場合はキー: 値のペアが新規追加されます。
【推奨】map.merge( $map, ($key1: $var1, $key2: $var2...) );
Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。
map.merge()では、複数のキー・値のペアを新規追加または更新できます。
解説
$map… マップの配列名$key1… 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略不可。$var1… 追加または更新したい値。省略不可。$key2… 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略可。$var2… 追加または更新したい値。省略可。
※３つ以上のキー: 値ペアを追加・更新したい場合は、$key2: $var2の後に続けて,で区切って記述する。省略可。
scss記述例
@use 'sass:map'; $settings: ( color: red, size: 16px ); $settings: map.merge($settings, (weight: bold) ); // $keyが新規追加されるので値が追加される // 出力：(color: red, size: 16px, weight: bold); $settings: map.merge($settings, (size: 18px) ); // $keyが既存の値と完全一致するので値が更新される // 出力：(color: red, size: 18px, weight: bold); $settings: map.merge($settings, (family: serif, color: blue) ); // $keyが複数新規追加されるので値が複数追加される // 出力：(color: blue, size: 18px, weight: bold, family: serif);
※キーが既存のキーと完全一致する場合は値が更新されます。
※キーが既存のキーと完全一致しない場合はキー: 値のペアが新規追加されます。
複数のマップを結合する
複数のマップを結合して１つのマップにする時は、map-merge()関数またはmap.merge()メソッドを利用します。
マップに要素を追加・更新する方法と同じ要領で利用できます。
【非推奨】map-merge( $map1, $map2... );
scss記述例
$setting1: ( color: red, size: 16px ); $setting2: ( color: blue, weight: bold ); $settings: map-merge( $setting1, $setting2 ); // 出力：( color: blue, size: 16px, weight: bold ) // 'color' は $setting2 の値が優先される
// $setting1 にないキー・値ペアは末尾に追加される。
【推奨】map.merge( $map1, $map2... );
scss記述例
@use 'sass:map'; $setting1: ( color: red, size: 16px ); $setting2: ( color: blue, weight: bold ); $settings: map.merge( $setting1, $setting2 ); // 出力：( color: blue, size: 16px, weight: bold ) // 'color' は $setting2 の値が優先される
// $setting1 にないキー・値ペアは末尾に追加される。
マップから要素を削除する
Sassのマップからキーと値を削除するには、map-remove()関数や、マップモジュールを利用したmap.remove()メソッドを使います。
【非推奨】map-remove( $map, $key1, $key2... );
map.remove()メソッドを利用する書き方への移行が推奨されています。
複数のキー・値を削除することができます。
解説
$map… マップの配列名。省略不可。$key1… 削除したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略不可。$key2… 削除したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略可。
３つ以上のキー: 値ペアを削除したい場合は、$key2の後に続けて,で区切って記述する。
scss記述例
$settings: ( color: red, size: 16px, weight: bold ); $settings: map-remove($settings, "weight" ); // $keyが完全一致していない。"weight"は文字列。 // 出力： (color: red, size: 16px, weight: bold ) $settings: map-remove($settings, size, weight ); // $keyが完全一致してるので成功。 // 出力： (color: red )
※キーが既存のキーと完全一致する場合に指定したキー・値が削除されます。
【推奨】map.remove( $map, $key );
Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。
map.remove()では、単一のキー・値のペアを削除できます。
複数のキー・値ペアには対応していません。複数のキー・値ペアを削除したい場合は、map.remove()を複数回行う必要があります。
解説
$map… マップの配列名。省略不可。$key… 削除したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略不可。
scss記述例
$settings: ( color: red, size: 16px, weight: bold ); $settings: map.remove($settings, "weight" ); // $keyが完全一致していない。"weight"は文字列。 // 出力： (color: red, size: 16px, weight: bold ) $settings: map.remove($settings, size ); // $keyが完全一致してるので成功。 // 出力： (color: red, weight: bold )
※キーが既存のキーと完全一致する場合に指定したキー・値が削除されます。
マップのキーを検索する
Sassのマップからキーを検索するには、map-has-key()関数や、マップモジュールを利用したmap.has-key()メソッドを使います。
【非推奨】map-has-key($map, $key );
map.has-key()メソッドを利用する書き方への移行が推奨されています。
指定したキーがマップ内に含まれるか確認することができます。
複数のキーには対応していません。
解説
$map… マップの配列名。省略不可。$key… 検索したいキー。型も含めて完全一致で指定する必要がある。省略不可。- 戻り値 …
true｜false
scss記述例
$settings: ( color: red, size: 16px ); map-has-key($settings, color); // → true map-has-key($settings, weight); // → false
※キーが既存のキーと完全一致する場合にtrueとなります。
【推奨】map.has-key( $map, $key );
Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。
指定したキーがマップ内に含まれるか確認することができます。
複数のキーには対応していません。
解説
$map… マップの配列名。省略不可。$key… 検索したいキー。型も含めて完全一致で指定する必要がある。省略不可。- 戻り値 …
true｜false
scss記述例
@use 'sass:map'; $settings: ( color: red, size: 16px ); map.has-key($settings, color); // → true map.has-key($settings, weight); // → false
※キーが既存のキーと完全一致する場合にtrueとなります。
マップの値を検索する
Sassの関数やモジュールには、マップの値を検索する方法は用意されていません。
カスタム関数を利用するなどして対応しましょう。
詳しくは下記の記事で紹介しています。
Sassで配列を使おう｜マップ内の値を検索する（カスタム関数の実装例）マップをループ処理する
Sassでは、マップの要素を繰り返して順番に処理（ループ）するために@eachディレクティブを使います。
ループを活用することで、同じようなスタイルを効率よく自動生成でき、メンテナンス性も大きく向上します。
@each $key, $var in $map{}
解説
$key… 繰り返されるマップのキーを代入する任意の変数。$var… 繰り返されるマップのキーに対する値を代入する任意の変数。利用時は#{$var}と記述する。$map… 繰り返し対象のマップ{}… 繰り返し処理を書く部分
scss記述例
$settings: (
color: blue,
font-size: 16px,
font-weight: bold
);
.box{
@each $key, $value in $settings {
#{$key}: $value;
}
}
出力されるCSS
.box {
color: blue;
font-size: 16px;
font-weight: bold;
}
まとめ
Sassのマップは、単なるキーと値のペアである以上に、意味づけされたデータを効率的に管理・再利用するための強力な手段です。
この記事では、マップの基本構造から、値の取得・更新・削除、そしてループ処理など、実践的な使い方を紹介してきました。
マップを使いこなすことで、スタイルの一元管理や動的な出力が可能になり、設計の柔軟性と拡張性が格段に向上します。
プロジェクトの規模や複雑さが増しても耐えられる、スマートでスケーラブルなCSS設計のために、ぜひSassのマップを積極的に活用してみてください。
