sass:map

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、Dart Sassのみが@useを使用した組み込みモジュールの読み込みをサポートしています。他の実装のユーザーは、代わりにグローバル名を使用して関数を呼び出す必要があります。

💡 豆知識

Sassライブラリとデザインシステムは、ネストされたマップ（マップを含むマップを含むマップ）として表現される設定を共有およびオーバーライドする傾向があります。

ネストされたマップの操作を容易にするために、一部のマップ関数は深い操作をサポートしています。たとえば、map.get()に複数のキーを渡すと、それらのキーに従って目的のネストされたマップが検索されます。

SCSS

Sass

     プレイグラウンドSCSS構文@use "sass:map";

$config: (a: (b: (c: d)));
@debug map.get($config, a, b, c); // d

     プレイグラウンドSass構文@use "sass:map"

$config: (a: (b: (c: d)))
@debug map.get($config, a, b, c) // d

map.deep-merge($map1, $map2) //=> map

Dart Sass: 1.27.0以降
LibSass: ✗
Ruby Sass: ✗

map.merge()と同じですが、ネストされたマップの値も再帰的にマージされます。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$helvetica-light: (
  "weights": (
    "lightest": 100,
    "light": 300
  )
);
$helvetica-heavy: (
  "weights": (
    "medium": 500,
    "bold": 700
  )
);

@debug map.deep-merge($helvetica-light, $helvetica-heavy);
// (
//   "weights": (
//     "lightest": 100,
//     "light": 300,
//     "medium": 500,
//     "bold": 700
//   )
// )
@debug map.merge($helvetica-light, $helvetica-heavy);
// (
//   "weights": (
//     "medium: 500,
//     "bold": 700
//   )
// )

       プレイグラウンドSass構文@use "sass:map"

$helvetica-light: ("weights": ("lightest": 100, "light": 300))
$helvetica-heavy: ("weights": ("medium": 500, "bold": 700))

@debug map.deep-merge($helvetica-light, $helvetica-heavy)
// (
//   "weights": (
//     "lightest": 100,
//     "light": 300,
//     "medium": 500,
//     "bold": 700
//   )
// )
@debug map.merge($helvetica-light, $helvetica-heavy);
// (
//   "weights": (
//     "medium: 500,
//     "bold": 700
//   )
// )

map.deep-remove($map, $key, $keys...) //=> map

Dart Sass: 1.27.0以降
LibSass: ✗
Ruby Sass: ✗

$keysが空の場合、$keyに関連付けられた値のない$mapのコピーを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.deep-remove($font-weights, "regular");
// ("medium": 500, "bold": 700)

       プレイグラウンドSass構文@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.deep-remove($font-weights, "regular")
// ("medium": 500, "bold": 700)

$keysが空でない場合、左から右へ、$keyを含み、$keysの最後のキーを除くキーのセットに従って、更新対象のネストされたマップを見つけます。

対象のマップに$keysの最後のキーに関連付けられた値がない$mapのコピーを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.deep-remove($fonts, "Helvetica", "weights", "regular");
// (
//   "Helvetica": (
//     "weights: (
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

       プレイグラウンドSass構文@use "sass:map"

$fonts: ("Helvetica": ("weights": ("regular": 400, "medium": 500, "bold": 700)))

@debug map.deep-remove($fonts, "Helvetica", "weights", "regular")
// (
//   "Helvetica": (
//     "weights: (
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

map.get($map, $key, $keys...)
map-get($map, $key, $keys...)

$keysが空の場合、$map内の$keyに関連付けられた値を返します。

$mapに$keyに関連付けられた値がない場合、nullを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";
$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null

       プレイグラウンドSass構文@use "sass:map"
$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.get($font-weights, "medium")  // 500
@debug map.get($font-weights, "extra-bold")  // null

Dart Sass: 1.27.0以降
LibSass: ✗
Ruby Sass: ✗

Dart Sassのみが3つ以上の引数でmap.get()の呼び出しをサポートしています。

$keysが空でない場合、左から右へ、$keyを含み、$keysの最後のキーを除くキーのセットに従って、検索対象のネストされたマップを見つけます。

対象のマップ内の$keysの最後のキーに関連付けられた値を返します。

マップにキーに関連付けられた値がない場合、または$keysのいずれかのキーがマップに存在しないか、マップではない値を参照している場合、nullを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.get($fonts, "Helvetica", "weights", "regular"); // 400
@debug map.get($fonts, "Helvetica", "colors"); // null

       プレイグラウンドSass構文@use "sass:map"

$fonts: ("Helvetica": ("weights": ("regular": 400, "medium": 500, "bold": 700)))

@debug map.get($fonts, "Helvetica", "weights", "regular") // 400
@debug map.get($fonts, "Helvetica", "colors") // null

map.has-key($map, $key, $keys...)
map-has-key($map, $key, $keys...) //=> boolean

$keysが空の場合、$mapに$keyに関連付けられた値が含まれているかどうかを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.has-key($font-weights, "regular"); // true
@debug map.has-key($font-weights, "bolder"); // false

       プレイグラウンドSass構文@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.has-key($font-weights, "regular") // true
@debug map.has-key($font-weights, "bolder") // false

Dart Sass: 1.27.0以降
LibSass: ✗
Ruby Sass: ✗

Dart Sassのみが3つ以上の引数でmap.has-key()の呼び出しをサポートしています。

$keysが空でない場合、左から右へ、$keyを含み、$keysの最後のキーを除くキーのセットに従って、検索対象のネストされたマップを見つけます。

対象のマップに$keysの最後のキーに関連付けられた値が含まれている場合、trueを返します。

含まれていない場合、または$keysのいずれかのキーがマップに存在しないか、マップではない値を参照している場合、falseを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.has-key($fonts, "Helvetica", "weights", "regular"); // true
@debug map.has-key($fonts, "Helvetica", "colors"); // false

       プレイグラウンドSass構文@use "sass:map"

$fonts: ("Helvetica": ("weights": ("regular": 400, "medium": 500, "bold": 700)))

@debug map.has-key($fonts, "Helvetica", "weights", "regular") // true
@debug map.has-key($fonts, "Helvetica", "colors") // false

map.keys($map)
map-keys($map) //=> list

$map内のすべてのキーのカンマ区切りリストを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.keys($font-weights); // "regular", "medium", "bold"

       プレイグラウンドSass構文@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.keys($font-weights)  // "regular", "medium", "bold"

map.merge($map1, $map2)
map-merge($map1, $map2)
map.merge($map1, $keys..., $map2)
map-merge($map1, $keys..., $map2) //=> map

⚠️ 注意！

実際には、map.merge($map1, $keys..., $map2)への実際の引数はmap.merge($map1, $args...)として渡されます。説明のためにのみ、ここでは$map1, $keys..., $map2として記述されています。

$keysが渡されない場合、$map1と$map2の両方のすべてのキーと値を持つ新しいマップを返します。

$map1と$map2の両方に同じキーがある場合、$map2の値が優先されます。

返されたマップ内の$map1にも出現するすべてのキーは、$map1と同じ順序になります。 $map2からの新しいキーはマップの最後に表示されます。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

       プレイグラウンドSass構文@use "sass:map"

$light-weights: ("lightest": 100, "light": 300)
$heavy-weights: ("medium": 500, "bold": 700)

@debug map.merge($light-weights, $heavy-weights)
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

Dart Sass: 1.27.0以降
LibSass: ✗
Ruby Sass: ✗

Dart Sassのみが3つ以上の引数でmap.merge()の呼び出しをサポートしています。

$keysが空でない場合、$keysに従って、マージ対象のネストされたマップを見つけます。 $keysのいずれかのキーがマップに存在しないか、マップではない値を参照している場合、そのキーの値を空のマップに設定します。

対象のマップが、対象のマップと$map2の両方のすべてのキーと値を含む新しいマップに置き換えられた$map1のコピーを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$fonts: (
  "Helvetica": (
    "weights": (
      "lightest": 100,
      "light": 300
    )
  )
);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($fonts, "Helvetica", "weights", $heavy-weights);
// (
//   "Helvetica": (
//     "weights": (
//       "lightest": 100,
//       "light": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

       プレイグラウンドSass構文@use "sass:map"

$fonts: ("Helvetica": ("weights": ("lightest": 100, "light": 300)))
$heavy-weights: ("medium": 500, "bold": 700)

@debug map.merge($fonts, "Helvetica", "weights", $heavy-weights)
// (
//   "Helvetica": (
//     "weights": (
//       "lightest": 100,
//       "light": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

map.remove($map, $keys...)
map-remove($map, $keys...) //=> map

$keysに関連付けられた値のない$mapのコピーを返します。

$keysのキーに$mapに関連付けられた値がない場合、無視されます。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.remove($font-weights, "regular"); // ("medium": 500, "bold": 700)
@debug map.remove($font-weights, "regular", "bold"); // ("medium": 500)
@debug map.remove($font-weights, "bolder");
// ("regular": 400, "medium": 500, "bold": 700)

       プレイグラウンドSass構文@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.remove($font-weights, "regular")  // ("medium": 500, "bold": 700)
@debug map.remove($font-weights, "regular", "bold")  // ("medium": 500)
@debug map.remove($font-weights, "bolder")
// ("regular": 400, "medium": 500, "bold": 700)

map.set($map, $key, $value)
map.set($map, $keys..., $key, $value) //=> map

⚠️ 注意！

実際には、map.set($map, $keys..., $key, $value)への実際の引数はmap.set($map, $args...)として渡されます。説明のためにのみ、ここでは$map, $keys..., $key, $valueとして記述されています。

$keysが渡されない場合、$keyの値が$valueに設定された$mapのコピーを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.set($font-weights, "regular", 300);
// ("regular": 300, "medium": 500, "bold": 700)

       プレイグラウンドSass構文@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.set($font-weights, "regular", 300)
// ("regular": 300, "medium": 500, "bold": 700)

Dart Sass: 1.27.0以降
LibSass: ✗
Ruby Sass: ✗

Dart Sassのみが4つ以上の引数でmap.set()の呼び出しをサポートしています。

$keysが渡された場合、$keysに従って、更新対象のネストされたマップを見つけます。 $keysのいずれかのキーがマップに存在しないか、マップではない値を参照している場合、そのキーの値を空のマップに設定します。

対象のマップの$keyの値が$valueに設定された$mapのコピーを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.set($fonts, "Helvetica", "weights", "regular", 300);
// (
//   "Helvetica": (
//     "weights": (
//       "regular": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

       プレイグラウンドSass構文@use "sass:map"

$fonts: ("Helvetica": ("weights": ("regular": 400, "medium": 500, "bold": 700)))

@debug map.set($fonts, "Helvetica", "weights", "regular", 300)
// (
//   "Helvetica": (
//     "weights": (
//       "regular": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

map.values($map)
map-values($map) //=> list

$map内のすべての値のカンマ区切りリストを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.values($font-weights); // 400, 500, 700

       プレイグラウンドSass構文@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.values($font-weights)  // 400, 500, 700

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド