Sass Maps gegenüber verschachtelten Listen

Kernpunkte

• Sass -Karten und verschachtelte Listen sind beide Datenstrukturen in SASS, und die Zuordnungen wurden in SASS 3.3 eingeführt. Die Mapping bietet Schlüsselwertpaare, die eine komplexere Datenspeicherung ermöglichen, während verschachtelte Listen einfachere Strukturen sind, die komplexe Daten speichern können, aber keine Schlüsselwertpaarung fehlen können.
• Trotz der zusätzlichen Komplexität der Kartierung werden sie aufgrund ihrer Fähigkeit, eine Vielzahl von Daten zu speichern (z. B. Breakpoint -Breiten, Farbwerte, Gitterlayouts, Typproportionen und andere reaktionsschnelle Typografie -Details). Auf der anderen Seite sind verschachtelte Listen aufgrund ihrer Einfachheit und weniger Eingaben praktischer.
• Einer der Hauptvorteile bei der Verwendung von SASS -Zuordnung ist die Möglichkeit, direkt auf bestimmte Werte zuzugreifen, wodurch der Code effizienter und einfacher zu lesen ist. Verschachtelte Listen können jedoch schneller schreiben und pflegen, aber es fehlt ihnen die Fehlerprüfung und detaillierte Abfragefunktionen des Zuordnung.
• Während verschachtelte Listen in Bezug auf die Eingabe effizienter sind, erfordern sie eine absolute Sicherheit über die Anzahl der Elemente, die jede Liste und ihre Bestellung enthalten wird. Fehlende Werte in verschachtelten Listen können zu Fehlern führen, die SASS nicht meldet, während für Zuordnungen die map-get() -Funktion auch dann den gewünschten Wert liefern kann, selbst wenn ein Wert fehlt.

Der Titel dieses Artikels kann einige Leute überraschen. Wenn Sie ein SASS-Veteran sind, können Sie eine Liste von Listen verwenden, um die Tage zu simulieren, an denen verschachtelte Datenarrays (vor Ruby-Sass-3.3). (Ruby) SASS 3.3 fügt einen neuen Datentyp mit dem Namen Mapping hinzu. Listen von Listen können komplexe Daten in verschachtelten Formaten speichern, aber keine Schlüsselwertpaarung aufweisen. Die Karte fügt Schlüsselwertpaare hinzu und erstellen Sie eine Reihe von Daten.

Mit dem Aufkommen der Zuordnung haben viele unserer Sass -Benutzer alles in die Zuordnung (und das aus gutem Grund!). Alle Breakpoint -Breiten, Farbwerte, Gitterlayouts, Typ -Proportionen und andere ansprechende Typografiedetails können in die Karte eingebracht werden!

Jetzt, da SASS ein Schlüsselwert-Paar-Mapping hat, gibt es einen guten Grund, eine Liste von Listen zu verwenden? Ein theoretischer Grund ist die Rückwärtskompatibilität: Wenn Ihr Sass wahrscheinlich von einem Entwickler mit älteren Versionen aufrechterhalten wird, hilft die Liste ihnen. In der Praxis wird die SASS -Version jedoch normalerweise von package.json oder anderen Projektkonfigurationen gesteuert, und das Ruby -Edelstein kann mit nur einem Befehl aktualisiert werden (gem update sass).

Ein praktischerer Grund, warum Sie möglicherweise verschachtelte Listen anstelle von Zuordnungen verwenden, ist, dass weniger Eingaben vorhanden sind. Vergleichen wir Karten und verschachtelte Listen, um zu sehen, wie sie in ihrer jeweiligen Syntax- und Loop -Traversal verglichen werden.

Grammatikvergleich

Erstellen wir in unserem Beispiel eine Datenstruktur, die die reaktionsschnelle Typografie steuert. Es speichert vier Haltepunkte (nun, einer ist die kleinste Standardansicht). Für jeden Haltepunkt speichern wir die minimale Breite, die maximale Breite, die Basis -Schriftgröße und die Grundlinienhöhe.

komplexe Mapping -Syntax

Folgendes ist, wie wir Daten in einer Karte speichern. Eine große Karte enthält vier Schlüssel (Haltepunktetiketten), deren Werte Karten von Variablen sind, die wir speichern und verwenden müssen. In diesem lesbaren Format haben wir über 450 Zeichen und 26 Zeilen.

<code>$breakpoint-map: (
  small: (
    min-width: null,
    max-width: 479px,
    base-font: 16px,
    vertical-rhythm: 1.3
  ),
  medium: (
    min-width: 480px,
    max-width: 959px,
    base-font: 18px,
    vertical-rhythm: 1.414
  ),
  large: (
    min-width: 960px,
    max-width: 1099px,
    base-font: 18px,
    vertical-rhythm: 1.5
  ),
  xlarge: (
    min-width: 1100px,
    max-width: null,
    base-font: 21px,
    vertical-rhythm: 1.618
  )
);</code>

verschachtelte List -Syntax

verschachtelte Listen, die die gleichen Daten speichern, sind viel kürzer. Wir fügen den Schlüssel jedoch nicht mehr zu den Daten hinzu, daher müssen wir uns darauf verlassen, ihn durch ihn zu schleifen oder ihn mit der nth() -Funktion aufzurufen. Das heißt, es ist viel kürzer als die Karte: weniger als 180 Zeichen, nur 6 Zeilen.

<code>$breakpoint-list: (
  (small, null, 479px, 16px, 1.3),
  (medium, 480px, 959px, 18px, 1.414),
  (large, 960px, 1099px, 18px, 1.5),
  (xlarge, 1100px, null, 21px, 1.618)
);</code>

Zyklusvergleich

erfordert beim Schreiben einer Datenstruktur nur ein Drittel der Zuordnungszeit. Aber wenn wir diese Werte durchlaufen müssen, wie vergleichen wir dann?

komplexe Mapping -Schleife

Wir können mit dem folgenden Code die oberen Elemente in dieser Karte durchlaufen:

<code>@each $label, $map in $breakpoint-map {}</code>

Die beiden Variablen ($label und $map) am Anfang dieser Zeile werden bei der Iterierung der Daten in der Karte in der Schleife dynamisch zugewiesen. Jeder Datenblock auf oberster Ebene hat zwei Komponenten: Schlüssel und Werte. Wir weisen den Schlüssel zu $label und den Wert (eine verschachtelte Karte) zu $map zu. In dieser Schleife können wir die Variablen $label und $map verwenden, die automatisch den Schlüssel und den Wert des aktuellen Eintrags darstellen.

Die Schleife wird viermal iteriert, eine verschachtelte Karte pro Iterating. Um nützliche Daten von verschachtelten Karten zu erhalten, müssen wir die map-get() -Funktion verwenden. Diese Funktion nimmt zwei Parameter vor - den Namen der Karte und den Namen des erforderlichen Schlüssels - und gibt den mit dem Schlüssel zugeordneten Wert zurück. Es ist das Äquivalent der $array['key'] und $object->key von PHP oder der object.key -Syntax von JavaScript in SASS.

, um @each zu verwenden, um über alle Untermaps zu iterieren und nützliche Variablen mit map-get() ihre Werte zuzuweisen, haben wir eine 6-Zeilen-Schleife mit 220 Charakter.

<code>@each $label, $map in $breakpoint-map {
  $min-width: map-get($map, min-width);
  $max-width: map-get($map, max-width);
  $base-font: map-get($map, base-font);
  $vertical-rhythm: map-get($map, vertical-rhythm);
}</code>

verschachtelte Listenschleife

verschachtelte Listen machen Schleifen effizienter. Für Karten müssen wir die Karte dynamischen Schleifenvariablen zuweisen und dann alle Werte Variablen mit map-get() zuweisen. Für Listen können wir jedoch Variablen schnell alle Werte zuweisen.

Da jedes Element in der Liste der obersten Ebene die gleichen fünf Werte in derselben Reihenfolge enthält, können wir jeden Wert einer dynamischen Variablen für die Verwendung in einer Schleife sofort zuweisen. Mit diesen Variablen müssen wir keine Subwerte für verfügbare Variablen mit map-get() zuweisen. Die verschachtelte Listenschleife, die wir benötigen, sind nur zwei Zeilen, weniger als 100 Zeichen.

<code>@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list {
}</code>

verschachtelte List -Warnung

verschachtelte Listen sind die wichtigsten Vorteile der Entwicklerleistung: Insgesamt können Sie weniger als die Hälfte so viel eingeben wie bei der Verwendung der Zuordnung. Es gibt jedoch einen Grund, SASS Karten hinzuzufügen: Sie geben eine Funktion an, die nicht auf Listen verfügt: Schlüsselwert-Zuordnung.

Fehlwert

Wenn Sie sich auf verschachtelte Listen verlassen, müssen Sie absolut sicher sein, wie viele Elemente jede Liste und die Reihenfolge, die sie sind. Mal sehen, was passiert, wenn wir einen Artikel in der Liste verpassen:

<code>$breakpoint-map: (
  small: (
    min-width: null,
    max-width: 479px,
    base-font: 16px,
    vertical-rhythm: 1.3
  ),
  medium: (
    min-width: 480px,
    max-width: 959px,
    base-font: 18px,
    vertical-rhythm: 1.414
  ),
  large: (
    min-width: 960px,
    max-width: 1099px,
    base-font: 18px,
    vertical-rhythm: 1.5
  ),
  xlarge: (
    min-width: 1100px,
    max-width: null,
    base-font: 21px,
    vertical-rhythm: 1.618
  )
);</code>

Wenn wir versuchen, den Code auszuführen, wird die letzte Liste brechen. Es wird $label und "1100px" $min-width korrekt "xlarge" zugewiesen, aber dann zugewiesen es "21px" an $max-width und "1.618" $base-font, wobei $vertical-rhythm leer ist. Infolgedessen erhalten wir eine ungültige Deklaration der Schriftgrößen und eine Eigenschaft für fehlende Linienhöhe im letzten Haltepunkt. Außerdem meldet SASS keinen Fehler dafür, daher wissen wir nicht, ob die Dinge erfolgreich sind. Wenn wir versuchen, die maximale Breite für Medienabfragen zu verwenden, erhalten wir den Wert der Schriftgröße (nur 21px) - ich denke, dies wäre eine sehr nutzlose maximale Breite!

Wenn wir stattdessen MAP verwenden, auch wenn ein Wert fehlt, gibt uns die map-get() -Funktion das, was wir brauchen. Dies ist unser Kompromiss: Die Einfachheit und Geschwindigkeit, die wir in der Liste erhalten, verlieren die Spezifität und die Fehlerverhütung bei der Zuordnung.

Abfragen Sie eine bestimmte Liste

ab

Ein weiteres verwandtes Problem bei der Verwendung verschachtelter Listen ist die Abfrage bestimmte Listen. Da die Karte Schlüsseln enthält, können Sie mit map-get():

schnell auf jeden Submap zugreifen

<code>$breakpoint-list: (
  (small, null, 479px, 16px, 1.3),
  (medium, 480px, 959px, 18px, 1.414),
  (large, 960px, 1099px, 18px, 1.5),
  (xlarge, 1100px, null, 21px, 1.618)
);</code>

Um Daten für mittlere Listen aus verschachtelten Listen zu erhalten, benötigen wir eine komplexere Funktion:

<code>@each $label, $map in $breakpoint-map {}</code>

Diese Funktion schaltet alle Listen in $breakpoint-list durch, überprüft den ersten Wert des gewünschten Etiketts und gibt die Liste zurück, wenn eine Übereinstimmung gefunden wird. Wenn das Ende der @each -Schule ohne gefundene Übereinstimmung erreicht wird, wird NULL zurückgegeben. Es handelt sich im Grunde genommen um eine schnelle hausgemachte Interpretation der map-get() der Liste, die den ersten Wert als Pseudo-Key verwendet.

fehlende Zuordnung Funktion

sass hat viele nützliche Funktionen, um Zuordnungen zu verarbeiten: In derselben Funktion gibt es keine verschachtelten Listen. Sie können beispielsweise map-merge() verwenden, um der Karte zusätzliche Schlüsselwertpaare hinzuzufügen. Verwenden Sie map-merge() mit freigegebenen Schlüssel, um den Wert der gemeinsam genutzten Taste zu aktualisieren. Sie können eine neue Liste mit join() oder append() hinzufügen, aber die Aktualisierungsfunktion, die map-merge() simuliert, erfordert eine andere benutzerdefinierte SASS -Funktion.

Eine weitere nützliche Zuordnungsfunktion ist map-has-key(). Diese Funktion ist nützlich, um jede benutzerdefinierte Funktion zu validieren, die von map-get() abhängt. Es gibt jedoch keine vergleichbaren Funktionen für die Liste.

Sie können Sassylisten verwenden, um die Mapping -Funktion einer Liste zu simulieren. (Diese Bibliothek lieferte diese Funktionen, bevor Sass Mapping -Unterstützung hinzufügte.)

Schlussfolgerung

Da Karten Schlüsselwertpaare verwenden, sind sie leistungsfähiger als Listen. Die zusätzliche SASS -Mapping -Funktion bietet eine praktische Möglichkeit, Daten zu finden und die zugeordneten Werte zu überprüfen.

verschachtelte SASS -Listen können schneller schreiben und pflegen, aber sie sind möglicherweise nicht so geeignet wie Zuordnungen für die Fehlerprüfung oder eine detaillierte Abfrage. Meistens denke ich, dass Mapping eine bessere Option ist, obwohl die Ausführlichkeit zunimmt. Für kleinere Codeblöcke und Einzelnutzungsschleifen verwende ich gelegentlich verschachtelte Listen, aber die Zuordnung ist besser für projektweite Einstellungen und Datenspeicher geeignet.

Haben Sie Karten und verschachtelte Listen in einer Ihrer Arbeiten verglichen oder den Code neu gestaltet, um eine gegenüber dem anderen zu priorisieren? Teilen Sie Ihre Erfahrungen in den Kommentaren mit!

Sie können den Code sehen, der in diesem Tutorial in diesem Sassmeister -Kern verwendet wird.

FAQ für SASS -Mapping und verschachtelte Listen (FAQ)

Was ist der Hauptunterschied zwischen einer Sass -Karte und einer verschachtelten Liste?

SASS -Mapping und verschachtelte Listen sind beide leistungsstarke Tools in SASS -Präprozessoren, haben jedoch offensichtliche Unterschiede. SASS -Karten ähneln assoziativen Arrays in anderen Programmiersprachen, bei denen jeder Wert mit einem eindeutigen Schlüssel zugeordnet ist. Dies erleichtert es einfach, Daten abzurufen, zu aktualisieren und zu manipulieren. Andererseits sind verschachtelte Listen eine Reihe von Werten, die Arrays in JavaScript ähneln. Sie eignen sich am besten, wenn Sie über eine Reihe von Werten speichern und iterieren müssen, aber sie fehlen jedoch die Möglichkeit, direkt auf bestimmte Werte zuzugreifen, die durch die Zuordnung bereitgestellt werden.

Wie verwendet ich Sass Mapping?

Um die SASS-Karte zu verwenden, müssen Sie zunächst eine Karte mit zwei Klammern definieren, wobei jedes Schlüsselwertpaar durch einen Dickdarm getrennt ist. Zum Beispiel $map: (key1: value1, key2: value2). Sie können dann die Funktion map-get wie folgt auf die Werte in der Karte zugreifen: map-get($map, key1).

Kann ich Sass -Karten wie verschachtelte Listen nisten?

Ja, Sie können Sass -Karten wie verschachtelte Listen nisten. Dies ist besonders nützlich, wenn Sie relevante Daten miteinander kombinieren möchten. Um auf die Werte in einer verschachtelten Karte zuzugreifen, müssen Sie die map-get -Funktion zweimal verwenden: map-get(map-get($map, key1), key2).

Wie kann man Sass Maps iterieren?

Sie können mit der @each -Richtlinie über die Sass -Karte iterieren. Die @each -Richtlinie erfordert zwei Variablen: Schlüssel und Wert. Hier ist ein Beispiel: @each $key, $value in $map { … }.

Was sind die Vorteile der Verwendung von SASS -Mapping anstelle von verschachtelten Listen?

SASS -Mapping hat mehrere Vorteile gegenüber verschachtelten Listen. Sie ermöglichen einen direkten Zugriff auf bestimmte Werte, sodass Ihr Code effizienter und einfacher zu lesen ist. Sie bieten auch integrierte Funktionen für die Manipulation von Zuordnungen, z. B. das Hinzufügen, Löschen und Aktualisieren von Schlüsselwertpaaren.

Kann ich verschachtelte Listen in Sass -Karten konvertieren?

Ja, Sie können die Funktion map-from-list verwenden, um verschachtelte Listen in Sass -Karten umzuwandeln. Diese Funktion enthält eine Liste von Paaren und gibt eine Karte zurück, bei der jedes Paar ein Schlüsselwertpaar in der Karte ist.

Wie kann ich verschachtelte Listen in Sass verwenden?

Um verschachtelte Listen in SASS zu verwenden, müssen Sie zunächst eine Liste mit zwei Klammern definieren, die jeder Wert durch einen Raum oder ein Komma getrennt ist. Zum Beispiel $list: (value1, value2, value3). Sie können dann die Funktion nth wie folgt auf die Werte in der Liste zugreifen: nth($list, 1).

Kann ich gleichzeitig Sass -Karten und verschachtelte Listen verwenden?

Ja, Sie können sowohl SASS -Mapping- als auch verschachtelte Listen verwenden. Beispielsweise können Sie Mappings verwenden, um eine Reihe von Listen zu speichern und umgekehrt. Dies ist nützlich, um komplexe Datenstrukturen zu organisieren.

Was sind die Einschränkungen bei der Verwendung von SASS -Zuordnung oder verschachtelten Listen?

Während Sass Mapping und verschachtelte Listen leistungsstarke Tools sind, haben sie einige Einschränkungen. Beispielsweise kann die Sass -Karte keine doppelten Schlüssel haben und die Reihenfolge der Schlüssel in der Karte kann nicht garantiert werden. Wenn verschachtelte Listen zu groß oder zu komplex werden, können sie schwierig zu verwalten sein.

Wie wählen Sie zwischen Sass Maps oder verschachtelten Listen?

Die Auswahl der Verwendung von SASS -Karte oder einer verschachtelten Liste hängt von Ihren spezifischen Anforderungen ab. Wenn Sie direkt auf bestimmte Werte zugreifen und Daten manipulieren müssen, ist die SASS -Zuordnung möglicherweise die beste Wahl. Wenn Sie nur eine Reihe von Werten speichern und iterieren müssen, reicht eine verschachtelte Liste aus.

Das obige ist der detaillierte Inhalt vonSass Maps gegenüber verschachtelten Listen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!