sass:map

Kompatibilität
Dart Sass
seit 1.23.0
LibSass
✗
Ruby Sass
✗

Nur Dart Sass unterstützt derzeit das Laden von integrierten Modulen mit @use. Benutzer anderer Implementierungen müssen Funktionen stattdessen über ihre globalen Namen aufrufen.

💡 Lustige Tatsache

Sass-Bibliotheken und Designsysteme neigen dazu, Konfigurationen zu teilen und zu überschreiben, die als verschachtelte Maps dargestellt werden (Maps, die Maps enthalten, die Maps enthalten ).

Um Ihnen die Arbeit mit verschachtelten Maps zu erleichtern, unterstützen einige Map-Funktionen tiefe Operationen. Wenn Sie beispielsweise mehrere Schlüssel an map.get() übergeben, folgt diese den Schlüsseln, um die gewünschte verschachtelte Map zu finden.

Spielplatz

SCSS-Syntax

@use "sass:map";

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

Sass-Syntax

@use "sass:map"

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

map.deep-merge($map1, $map2) //=> map
Kompatibilität
Dart Sass
seit 1.27.0
LibSass
✗
Ruby Sass
✗

Identisch mit map.merge(), mit der Ausnahme, dass verschachtelte Map-Werte *auch* rekursiv zusammengeführt werden.

Spielplatz

SCSS-Syntax

@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
//   )
// )
Spielplatz

Sass-Syntax

@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
Kompatibilität
Dart Sass
seit 1.27.0
LibSass
✗
Ruby Sass
✗

Wenn $keys leer ist, wird eine Kopie von $map zurückgegeben, ohne einen Wert, der $key zugeordnet ist.

Spielplatz

SCSS-Syntax

@use "sass:map";

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

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

Sass-Syntax

@use "sass:map"

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

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

Wenn $keys nicht leer ist, folgt die Menge der Schlüssel, einschließlich $key und ausschließlich des letzten Schlüssels in $keys, von links nach rechts, um die verschachtelte Map zu finden, die für die Aktualisierung vorgesehen ist.

Gibt eine Kopie von $map zurück, bei der die Ziel-Map keinen Wert hat, der dem letzten Schlüssel in $keys zugeordnet ist.

Spielplatz

SCSS-Syntax

@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
//     )
//   )
// )
Spielplatz

Sass-Syntax

@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...)

Wenn $keys leer ist, wird der Wert in $map zurückgegeben, der $key zugeordnet ist.

Wenn $map keinen Wert hat, der $key zugeordnet ist, wird null zurückgegeben.

Spielplatz

SCSS-Syntax

@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
Spielplatz

Sass-Syntax

@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
Kompatibilität
Dart Sass
seit 1.27.0
LibSass
✗
Ruby Sass
✗

Nur Dart Sass unterstützt den Aufruf von map.get() mit mehr als zwei Argumenten.

Wenn $keys nicht leer ist, folgt die Menge der Schlüssel, einschließlich $key und ausschließlich des letzten Schlüssels in $keys, von links nach rechts, um die verschachtelte Map zu finden, die für die Suche vorgesehen ist.

Gibt den Wert in der Ziel-Map zurück, der dem letzten Schlüssel in $keys zugeordnet ist.

Gibt null zurück, wenn die Map keinen Wert hat, der dem Schlüssel zugeordnet ist, oder wenn ein Schlüssel in $keys in einer Map fehlt oder auf einen Wert verweist, der keine Map ist.

Spielplatz

SCSS-Syntax

@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
Spielplatz

Sass-Syntax

@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

Wenn $keys leer ist, wird zurückgegeben, ob $map einen Wert enthält, der $key zugeordnet ist.

Spielplatz

SCSS-Syntax

@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
Spielplatz

Sass-Syntax

@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
Kompatibilität
Dart Sass
seit 1.27.0
LibSass
✗
Ruby Sass
✗

Nur Dart Sass unterstützt den Aufruf von map.has-key() mit mehr als zwei Argumenten.

Wenn $keys nicht leer ist, folgt die Menge der Schlüssel, einschließlich $key und ausschließlich des letzten Schlüssels in $keys, von links nach rechts, um die verschachtelte Map zu finden, die für die Suche vorgesehen ist.

Gibt true zurück, wenn die Ziel-Map einen Wert enthält, der dem letzten Schlüssel in $keys zugeordnet ist.

Gibt false zurück, wenn dies nicht der Fall ist, oder wenn ein Schlüssel in $keys in einer Map fehlt oder auf einen Wert verweist, der keine Map ist.

Spielplatz

SCSS-Syntax

@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
Spielplatz

Sass-Syntax

@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

Gibt eine durch Kommas getrennte Liste aller Schlüssel in $map zurück.

Spielplatz

SCSS-Syntax

@use "sass:map";

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

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

Sass-Syntax

@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

⚠️ Vorsicht!

In der Praxis werden die tatsächlichen Argumente für map.merge($map1, $keys..., $map2) als map.merge($map1, $args...) übergeben. Sie werden hier nur zur Erklärung als $map1, $keys..., $map2 beschrieben.

Wenn keine $keys übergeben werden, wird eine neue Map mit allen Schlüsseln und Werten aus $map1 und $map2 zurückgegeben.

Wenn sowohl $map1 als auch $map2 denselben Schlüssel haben, hat der Wert von $map2 Vorrang.

Alle Schlüssel in der zurückgegebenen Map, die auch in $map1 vorkommen, haben dieselbe Reihenfolge wie in $map1. Neue Schlüssel aus $map2 erscheinen am Ende der Map.

Spielplatz

SCSS-Syntax

@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)
Spielplatz

Sass-Syntax

@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)
Kompatibilität
Dart Sass
seit 1.27.0
LibSass
✗
Ruby Sass
✗

Nur Dart Sass unterstützt den Aufruf von map.merge() mit mehr als zwei Argumenten.

Wenn $keys nicht leer ist, folgt die $keys, um die verschachtelte Map für das Zusammenführen zu finden. Wenn ein Schlüssel in $keys in einer Map fehlt oder auf einen Wert verweist, der keine Map ist, wird der Wert an diesem Schlüssel auf eine leere Map gesetzt.

Gibt eine Kopie von $map1 zurück, bei der die Ziel-Map durch eine neue Map ersetzt wird, die alle Schlüssel und Werte sowohl der Ziel-Map als auch von $map2 enthält.

Spielplatz

SCSS-Syntax

@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
//     )
//   )
// )
Spielplatz

Sass-Syntax

@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

Gibt eine Kopie von $map zurück, ohne Werte, die $keys zugeordnet sind.

Wenn ein Schlüssel in $keys keinen zugeordneten Wert in $map hat, wird er ignoriert.

Spielplatz

SCSS-Syntax

@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)
Spielplatz

Sass-Syntax

@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

⚠️ Vorsicht!

In der Praxis werden die tatsächlichen Argumente für map.set($map, $keys..., $key, $value) als map.set($map, $args...) übergeben. Sie werden hier nur zur Erklärung als $map, $keys..., $key, $value beschrieben.

Wenn keine $keys übergeben werden, wird eine Kopie von $map zurückgegeben, bei der der Wert an $key auf $value gesetzt ist.

Spielplatz

SCSS-Syntax

@use "sass:map";

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

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

Sass-Syntax

@use "sass:map"

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

@debug map.set($font-weights, "regular", 300)
// ("regular": 300, "medium": 500, "bold": 700)
Kompatibilität
Dart Sass
seit 1.27.0
LibSass
✗
Ruby Sass
✗

Nur Dart Sass unterstützt den Aufruf von map.set() mit mehr als drei Argumenten.

Wenn $keys übergeben werden, folgt die $keys, um die verschachtelte Map für die Aktualisierung zu finden. Wenn ein Schlüssel in $keys in einer Map fehlt oder auf einen Wert verweist, der keine Map ist, wird der Wert an diesem Schlüssel auf eine leere Map gesetzt.

Gibt eine Kopie von $map zurück, bei der der Wert der Ziel-Map an $key auf $value gesetzt ist.

Spielplatz

SCSS-Syntax

@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
//     )
//   )
// )
Spielplatz

Sass-Syntax

@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

Gibt eine durch Kommas getrennte Liste aller Werte in $map zurück.

Spielplatz

SCSS-Syntax

@use "sass:map";

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

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

Sass-Syntax

@use "sass:map"

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

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