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

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():

<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!