Maps
Maps in Sass speichern Schlüssel-Wert-Paare und erleichtern das Nachschlagen eines Wertes anhand seines entsprechenden Schlüssels. Sie werden mit (<Ausdruck>: <Ausdruck>, <Ausdruck>: <Ausdruck>) geschrieben. Der Ausdruck vor dem : ist der Schlüssel, und der Ausdruck danach ist der Wert, der diesem Schlüssel zugeordnet ist. Die Schlüssel müssen eindeutig sein, die Werte dürfen jedoch dupliziert werden. Im Gegensatz zu Listen müssen Maps in Klammern geschrieben werden. Eine Map ohne Paare wird als () geschrieben.
💡 Lustige Tatsache
Aufmerksame Leser werden bemerken, dass eine leere Map, (), genauso geschrieben wird wie eine leere Liste. Das liegt daran, dass sie sowohl als Map als auch als Liste zählt. Tatsächlich zählen alle Maps als Listen! Jede Map zählt als Liste, die für jedes Schlüssel/Wert-Paar eine zweielementige Liste enthält. Zum Beispiel zählt (1: 2, 3: 4) als (1 2, 3 4).
Maps erlauben die Verwendung beliebiger Sass-Werte als Schlüssel. Der == Operator wird verwendet, um zu bestimmen, ob zwei Schlüssel gleich sind.
⚠️ Vorsicht!
Meistens ist es ratsam, Anführungszeichen anstelle von nicht zitierten Zeichenketten für Map-Schlüssel zu verwenden. Das liegt daran, dass einige Werte, wie z. B. Farbnamen, wie nicht zitierte Zeichenketten aussehen können, aber tatsächlich andere Typen sind. Um verwirrende Probleme zu vermeiden, verwenden Sie einfach Anführungszeichen!
Maps verwendenMaps verwenden Permalink
Da Maps keine gültigen CSS-Werte sind, tun sie von sich aus nicht viel. Deshalb bietet Sass eine Reihe von Funktionen, um Maps zu erstellen und auf die darin enthaltenen Werte zuzugreifen.
Einen Wert nachschlagenEinen Wert nachschlagen Permalink
Bei Maps geht es darum, Schlüssel und Werte zu verknüpfen. Daher gibt es natürlich eine Möglichkeit, den einem Schlüssel zugeordneten Wert zu erhalten: die map.get($map, $key) Funktion! Diese Funktion gibt den in der Map dem angegebenen Schlüssel zugeordneten Wert zurück. Sie gibt null zurück, wenn die Map den Schlüssel nicht enthält.
SpielplatzSCSS-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
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
Etwas für jedes Paar tunEtwas für jedes Paar tun Permalink
Dies verwendet zwar keine Funktion, ist aber dennoch eine der gängigsten Arten, Maps zu verwenden. Die @each Regel wertet für jedes Schlüssel/Wert-Paar in einer Map einen Stilblock aus. Der Schlüssel und der Wert werden Variablen zugewiesen, sodass sie im Block leicht abgerufen werden können.
SpielplatzSCSS-Syntax
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
@each $name, $glyph in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
}
}
Sass-Syntax
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
@each $name, $glyph in $icons
.icon-#{$name}:before
display: inline-block
font-family: "Icon Font"
content: $glyph
CSS-Ausgabe
.icon-eye:before {
display: inline-block;
font-family: "Icon Font";
content: "\f112";
}
.icon-start:before {
display: inline-block;
font-family: "Icon Font";
content: "\f12e";
}
.icon-stop:before {
display: inline-block;
font-family: "Icon Font";
content: "\f12f";
}
Einer Map hinzufügenEiner Map hinzufügen Permalink
Es ist auch nützlich, neue Paare zu einer Map hinzuzufügen oder den Wert für einen vorhandenen Schlüssel zu ersetzen. Die map.set($map, $key, $value) Funktion erledigt dies: Sie gibt eine Kopie von $map zurück, bei der der Wert unter $key auf $value gesetzt ist.
SpielplatzSCSS-Syntax
@use "sass:map";
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.set($font-weights, "extra-bold", 900);
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900);
// ("regular": 400, "medium": 500, "bold": 900)
Sass-Syntax
@use "sass:map"
$font-weights: ("regular": 400, "medium": 500, "bold": 700)
@debug map.set($font-weights, "extra-bold": 900)
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900)
// ("regular": 400, "medium": 500, "bold": 900)
Anstatt Werte einzeln festzulegen, können Sie auch zwei vorhandene Maps mit map.merge($map1, $map2) zusammenführen.
SpielplatzSCSS-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)
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)
Wenn beide Maps dieselben Schlüssel haben, werden die Werte der zweiten Map in der Map verwendet, die zurückgegeben wird.
SpielplatzSCSS-Syntax
@use "sass:map";
$weights: ("light": 300, "medium": 500);
@debug map.merge($weights, ("medium": 700));
// ("light": 300, "medium": 700)
Sass-Syntax
@use "sass:map";
$weights: ("light": 300, "medium": 500)
@debug map.merge($weights, ("medium": 700))
// ("light": 300, "medium": 700)
Beachten Sie, dass map.set() und map.merge() die ursprüngliche Liste nicht ändern, da Sass-Maps unveränderlich sind.
UnveränderlichkeitUnveränderlichkeit Permalink
Maps in Sass sind unveränderlich, was bedeutet, dass sich der Inhalt eines Map-Wertes niemals ändert. Alle Map-Funktionen von Sass geben neue Maps zurück, anstatt die Originale zu ändern. Unveränderlichkeit hilft, viele heimtückische Fehler zu vermeiden, die auftreten können, wenn dieselbe Map über verschiedene Teile des Stylesheets hinweg geteilt wird.
Sie können Ihren Zustand jedoch im Laufe der Zeit aktualisieren, indem Sie neue Maps derselben Variablen zuweisen. Dies wird oft in Funktionen und Mixins verwendet, um die Konfiguration in einer Map zu verfolgen.
SpielplatzSCSS-Syntax
@use "sass:map";
$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);
@mixin add-browser-prefix($browser, $prefix) {
$prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global;
}
@include add-browser-prefix("opera", o);
@debug $prefixes-by-browser;
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)
Sass-Syntax
@use "sass:map"
$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)
@mixin add-browser-prefix($browser, $prefix)
$prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global
@include add-browser-prefix("opera", o)
@debug $prefixes-by-browser
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)