
SassはCSSを効率的に記述するために開発されたメタ言語(拡張言語)です。
Sassについての基礎知識は下記の記事で紹介しています。
Sassにおけるマップ(map)とは、「キー(key)」と「値(value)」のペアを格納するデータ構造のことです。
他の言語でいう連想配列やオブジェクトに相当し、Sassの中で変数を整理して管理するのにとても便利な仕組みです。
この記事では、Sassでマップ(連想配列)を利用する方法を徹底的に紹介します。
もくじ
マップ(Map)とは?
Sassにおけるマップとは、キーと値のペアをセットで管理する連想配列です。
キー(インデックス)に文字列を利用し、値に対してわかりやすい名前をつけて保持することができます。
scss記述例|マップを定義
$theme-colors: ( // キー: 値; として記述する primary: #007bff, secondary: #6c757d, success: #28a745 );
マップを使うメリット
マップ(連想配列)を使うと、下記のようなメリットがあります。
- 意味のある名前で値を管理できる(可読性が高い)
- 順序に依存せず値を取得できる
- 階層的な構造(多次元配列)でもわかりやすく対応できる
- 繰り返し処理(
@each
)と組み合わせて効率的にCSSを生成できる - 色やサイズなど、複数の値を一括で管理・変更できる
- マップ内で要素ごとの値の取得・追加・検索などの操作が可能
マップと似たデータ構造体として、リスト(配列)があります。
リストはキーではなく1から始まる数字のインデックス(順番)をもとに並べた配列です。
リストについての詳しい説明は下記の記事に紹介しています。
マップを定義する
マップを定義する方法は下記の通りです。
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におけるマップは、上記のようにキーと値のペアを常にカンマで区切って定義する必要があります。
この,
は文法上必須であり、省略したりスペースで代用することはできません。
ただし、値の中にスペース区切りのリストを入れることは可能です。
値の中でカンマ区切りのリストを利用する時は()
で包む必要があります。
リストのセパレーターについて、詳しくは下記の記事で紹介しています。
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
※キーは型も含めて完全一致しなければなりません。文字列で定義したキーは文字列で指定しましょう。
※多次元連想配列の場合、$key
1に続けて$key2
を記述することで値を取得できます。
マップに要素を追加・更新する
Sassのマップに後からキーと値を追加・上書きするには、map-merge()
関数や、マップモジュールを利用したmap.set()
メソッドまたはmap.merge()
メソッドを使います。
これにより、より柔軟で再利用性の高いスタイル設計が可能になります。
【非推奨】map-merge( $map, ( $key1: $var1, $key2: $var2... ) );
値を追加したり更新することができる関数です。map.merge()
メソッドを利用する書き方への移行が推奨されています。
解説
$map
… マップの配列名。省略不可。$key1
… 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略不可。$var1
… 追加または更新したい値。省略不可。$key2
… 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略可。$var2
… 追加または更新したい値。省略可。
※3つ以上のキー: 値ペアを追加・更新したい場合は、$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
… 追加または更新したい値。省略可。
※3つ以上のキー: 値ペアを追加・更新したい場合は、$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);
※キーが既存のキーと完全一致する場合は値が更新されます。
※キーが既存のキーと完全一致しない場合はキー: 値のペアが新規追加されます。
複数のマップを結合する
複数のマップを結合して1つのマップにする時は、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
… 削除したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略可。
3つ以上のキー: 値ペアを削除したい場合は、$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では、マップの要素を繰り返して順番に処理(ループ)するために@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のマップを積極的に活用してみてください。
この記事が気に入ったらシェアしてください