Maps in SASS

Dieser Artikel erklärt Maps in SASS.

Wir erklären die Grundlagen bis zur fortgeschrittenen Verwendung von SASS-Maps und bieten praktische Beispiele.

YouTube Video

Maps in SASS

Was ist eine Map in SASS?

Eine Map in SASS ist eine Datenstruktur, die Schlüssel-Wert-Paare enthält, ähnlich wie Objekte in JavaScript oder Dictionaries in Python. Durch die Verwendung von Maps in SASS können Sie komplexe Styles prägnant verwalten und die Wartbarkeit verbessern.

Grundlegende Syntax von Maps

Maps in SASS werden mit () (Klammern) definiert. Die Syntax ist wie folgt:.

1$map-name: (
2  key1: value1,
3  key2: value2,
4  key3: value3
5);

Um beispielsweise eine Map für die Verwaltung von Farbthemen zu erstellen, können Sie sie wie unten gezeigt definieren:.

1$colors: (
2  primary: #3498db,
3  secondary: #2ecc71,
4  danger: #e74c3c
5);

Werte aus einer Map abrufen

In SASS verwenden Sie die Funktion map.get(), um einen Wert aus einer Map abzurufen.

Anwendungsbeispiel:

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8.button {
 9  background-color: map.get($colors, primary);
10}

Ausgabe:

1.button {
2  background-color: #3498db;
3}

• Dieser Code ruft den primary-Farbwert aus der $colors-Map ab und weist ihn der Hintergrundfarbe des Buttons zu.

Schlüssel und Werte in einer Map setzen

Mit der Funktion map.set() können Sie einem bestimmten Schlüssel einen neuen Wert zuweisen. Wenn der Schlüssel bereits existiert, wird sein Wert überschrieben.

Beispielhafte Verwendung

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8// set danger color
 9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12  background-color: map.get($updated-colors, danger);
13}

• Dieser Code fügt der Map einen danger-Schlüssel hinzu und setzt dessen Wert als Hintergrundfarbe des Buttons.

Ausgabe

1.button-danger {
2  background-color: #e74c3c;
3}

Schlüssel aus einer Map entfernen

Durch die Verwendung der Funktion map.remove() können Sie einen bestimmten Schlüssel und dessen Wert aus einer Map entfernen.

Beispielhafte Verwendung

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13  background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17  background-color: map.get($reduced-colors, danger);
18}

• Dieser Code entfernt den danger-Schlüssel aus der Map, sodass die Hintergrundfarbe von button-danger null ist.

Ausgabe

1.button-primary {
2  background-color: #3498db;
3}

Schlüssel und Werte zu einer Map hinzufügen

Mit der Funktion map.merge() können Sie einer vorhandenen Map neue Schlüssel und Werte hinzufügen.

Beispielhafte Verwendung

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (danger: #e74c3c));
 9
10.button-danger {
11  background-color: map.get($extended-colors, danger);
12}

• Dieser Code fügt einer bestehenden SASS-Map einen danger-Schlüssel hinzu und setzt dessen Wert als Hintergrundfarbe des Buttons.

Ausgabe

1.button-danger {
2  background-color: #e74c3c;
3}

Mehrere Schlüssel und Werte zu einer Map hinzufügen

Mit der Funktion map.merge() können Sie einer vorhandenen Map gleichzeitig mehrere neue Schlüssel und Werte hinzufügen.

Beispielhafte Verwendung

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (
 9  danger: #e74c3c,
10  warning: #f39c12,
11  info: #8e44ad
12));
13
14.button-danger {
15  background-color: map.get($extended-colors, danger);
16}

• Dieser Code fügt einer bestehenden SASS-Map gleichzeitig mehrere Schlüssel und Werte hinzu.

Schlüssel in einer Map prüfen

Mit der Funktion map.has-key() können Sie prüfen, ob ein bestimmter Schlüssel in einer Map existiert.

Beispielhafte Verwendung

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger);  // false

Alle Schlüssel oder Werte aus einer Map abrufen

Alle Schlüssel abrufen

Mit der Funktion map.keys() können Sie alle Schlüssel abrufen.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)

Alle Werte abrufen

Mit der Funktion map.values() können Sie alle Werte abrufen.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)

Durch eine Map iterieren

In SASS können Sie die Direktive @each verwenden, um durch eine Map zu iterieren.

Beispielhafte Verwendung

 1$colors: (
 2  primary: #3498db,
 3  secondary: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $color in $colors {
 8  .color-#{$name} {
 9    background-color: $color;
10  }
11}

• Dieser Code durchläuft jeden Schlüssel und Wert in einer SASS-Map und generiert automatisch eine Klasse für jede Farbe.

Ausgabe

 1.color-primary {
 2  background-color: #3498db;
 3}
 4
 5.color-secondary {
 6  background-color: #2ecc71;
 7}
 8
 9.color-danger {
10  background-color: #e74c3c;
11}

Arbeiten mit verschachtelten Maps

Maps können auch eine verschachtelte Struktur haben. In diesem Fall verwenden Sie verschachtelte map.get()-Funktionen.

Beispielhafte Verwendung

 1@use "sass:map";
 2
 3$themes: (
 4  light: (
 5    background: #ffffff,
 6    text: #000000
 7  ),
 8  dark: (
 9    background: #000000,
10    text: #ffffff
11  )
12);
13
14body {
15  background-color: map.get(map.get($themes, light), background);
16  color: map.get(map.get($themes, light), text);
17}

• Dieser Code holt sich die Hintergrund- und Textfarben für das light-Theme aus einer verschachtelten SASS-Map und weist sie dem body zu.

Ausgabe

1body {
2  background-color: #ffffff;
3  color: #000000;
4}

Map-Anwendungsfall: Responsive Design

Durch die Verwendung von Maps können Sie Media Queries und Responsive Design einfach verwalten.

Beispielhafte Verwendung

 1$breakpoints: (
 2  small: 480px,
 3  medium: 768px,
 4  large: 1024px
 5);
 6
 7@each $label, $size in $breakpoints {
 8  @media (max-width: $size) {
 9    .container-#{$label} {
10      width: 100%;
11    }
12  }
13}

• Dieser Code nutzt eine SASS-Map, um automatisch responsive Container-Klassen für jeden Breakpoint zu generieren.

Ausgabe

 1@media (max-width: 480px) {
 2  .container-small {
 3    width: 100%;
 4  }
 5}
 6
 7@media (max-width: 768px) {
 8  .container-medium {
 9    width: 100%;
10  }
11}
12
13@media (max-width: 1024px) {
14  .container-large {
15    width: 100%;
16  }
17}

Fazit

SASS-Maps sind ein leistungsstarkes Werkzeug zum Organisieren Ihrer Stylesheets und erhöhen die Flexibilität sowie Wiederverwendbarkeit. Sie können in vielen Szenarien verwendet werden, wie z. B. Wertverwaltung, Iteration und Implementierung von Responsive Design.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video