Request for Comments: Verschachtelte Karten funktionen

Da Sass-Bibliotheken und Designsysteme komplexer werden und mehr Benutzer mit unterschiedlichen Bedürfnissen haben, entwickeln sie oft die Notwendigkeit, Konfigurationen und Designtoken zu teilen und zu überschreiben. Diese Konfiguration ist oft hierarchisch und wird schließlich als Karten dargestellt, die Karten enthalten, die noch mehr Karten enthalten. Bisher haben die Kartenfunktionen von Sass die Arbeit mit dieser Art von verschachtelter Kartenstruktur nicht wirklich erleichtert. Aber das ändert sich mit dem neuesten Sprachvorschlag, geschrieben vom Sass-Kernteammitglied Miriam Suzanne.

Dieser Vorschlag erweitert die bestehenden Kartenfunktionen und fügt einige neue hinzu, um die Arbeit mit verschachtelten Karten erheblich zu erleichtern. Er basiert auf Hilfsfunktionen, die in allen Arten von Sass-Projekten im Web auftauchen, und integriert Best Practices zurück in die Sprache selbst.

Die FunktionenDie Funktionen Permalink

Hier sind die neuen und verbesserten Funktionen, die dieser Vorschlag hinzufügt

map.get() und map.has-key()map.get() und map.has-key() Permalink

Die Funktionen map.get() und map.has-key() akzeptieren jetzt beliebig viele Schlüssel als Argumente. Jeder Schlüssel dringt tiefer in eine verschachtelte Karte ein, sodass Sie verschachtelte Werte leicht inspizieren können, ohne eine Reihe von Funktionsaufrufen verketten zu müssen müssen.

Nehmen wir zum Beispiel die folgende vereinfachte Konfigurations karte

$config: (
  "colors": (
    "primary": red,
    "secondary": blue
  )
)

Für diese Karte ruft map.get($config, "colors", "primary") den Wert des Schlüssels "colors" (("primary": red)) und dann den Wert des Schlüssels "primary" ab und gibt red zurück.

Ebenso gibt map.has-key($config, "colors", "primary") true zurück, während map.has-key($config, "colors", "tertiary") false zurückgibt.

map.merge()map.merge() Permalink

Die Funktion map.merge() kann jetzt als map.merge($map1, $keys..., $map2) aufgerufen werden. Dies wird $map2 mit einem Unterelement von $map1 an der durch die Schlüssel gegebenen Position zusammenführen und dabei die übergeordneten Karten aktualisieren, während es fortfährt.

Zum Beispiel wird bei Verwendung der Konfigurationskarte, die oben definiert wurde, map.merge($config, "colors", ("primary": green)) Folgendes zurückgeben:

(
  "colors": (
    "primary": green,
    "secondary": blue
  )
)

map.set()map.set() Permalink

Die Funktion map.set($map, $keys..., $value) ist völlig neu. Obwohl das Aktualisieren einzelner Werte in Karten mit map.merge() immer möglich war, haben wir festgestellt, dass Benutzer von der Abwesenheit einer dedizierten set()-Funktion verwirrt sind. Diese Funktion erfüllt nicht nur diese Rolle, sondern ermöglicht auch das Setzen von Werten in verschachtelten Karten ebenso.

Sie können map.set() für normale einlagige Karten verwenden, indem Sie nur einen Schlüssel übergeben. Zum Beispiel gibt map.set(("wide": 200px, "narrow": 70px), "wide", 180px) ("wide": 180px, "narrow": 70px) zurück.

Aber Sie können es auch für verschachtelte Karten verwenden. Zum Beispiel gibt map.set($config, "colors", "tertiary", yellow) Folgendes zurück:

(
  "colors": (
    "primary": red,
    "secondary": blue,
    "tertiary": yellow
  )
)

map.deep-remove()map.deep-remove() Permalink

Da die bestehende Funktion map.remove() bereits beliebig viele Argumente akzeptiert, konnten wir sie nicht einfach aktualisieren, um mit verschachtelten Karten zu arbeiten. Stattdessen haben wir uns entschieden, eine neue Funktion nur für verschachtelte Karten hinzuzufügen, namens map.deep-remove($map, $keys...). Diese Funktion entfernt den Wert am letzten Schlüssel in der Liste und aktualisiert alle übergeordneten Karten entsprechend.

Zum Beispiel gibt map.deep-remove($config, "colors", "secondary") Folgendes zurück: ("colors": ("primary": red)).

map.deep-merge()map.deep-merge() Permalink

Die letzte neue Funktion ist vielleicht die aufregendste. map.deep-merge($map1, $map2) funktioniert genauso wie map.merge(), außer dass alle verschachtelten Karten *ebenfalls* zusammengeführt werden, einschließlich Karten innerhalb dieser Karten und so weiter. Dies erleichtert die Kombination zweier Konfigurationskarten mit derselben Struktur, ohne jede Ebene manuell zusammenführen zu müssen müssen.

Zum Beispiel gibt map.deep-merge($config, ("colors": ("secondary": teal))) Folgendes zurück:

(
  "colors": (
    "primary": red,
    "secondary": teal
  )
)

Lassen Sie uns wissen, was Sie denken!Lassen Sie uns wissen, was Sie denken! Permalink

Wenn Sie mehr über diesen Vorschlag erfahren möchten, lesen Sie ihn vollständig auf GitHub. Er ist für die nächsten Monate für Kommentare und Überarbeitungen geöffnet. Wenn Sie also möchten, dass sich etwas ändert, erstellen Sie bitte ein Issue, und wir können es besprechen diskutieren!