Wie dieses SCSS-Projekt ausgehend von einer Karte organisiert bleibt

Als ich an der Dokumentation für mein Produkt LiveAPI arbeitete, begann ich mit der Verwendung von MkDocs, einem statischen Site-Generator, der saubere und professionelle Dokumentation erstellt.

Allerdings fand ich das Design etwas eintönig und beschloss, das Projekt zu erkunden, um einige Anpassungen vorzunehmen.

Diese Reise führte mich zu einem faszinierenden Teil seiner Architektur: Sass-Karten.

Was als beiläufige Modifikation begann, entwickelte sich zu einer tieferen Wertschätzung für das durchdachte Design hinter diesem Projekt.

In diesem Blog werde ich untersuchen, wie Sass-Maps im Material-Theme von MkDocs verwendet werden – insbesondere in seinen Mixins – und wie sie zur Flexibilität und Skalierbarkeit des Designsystems beitragen. Lasst uns eintauchen!

---

Was sind Sass-Maps?

Sass-Maps sind eine Schlüsselwert-Datenstruktur in Sass, ähnlich wie Wörterbücher in Python oder Objekte in JavaScript.

Sie ermöglichen es uns, zusammengehörige Daten kompakt zu speichern und Werte dynamisch abzurufen.

Im MkDocs Material-Theme werden Sass-Maps verwendet, um gerätespezifische Haltepunkte für responsives Design zu definieren. Zum Beispiel:

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

Diese Karte organisiert Haltepunkte in Kategorien (Mobil, Tablet, Bildschirm) und Unterkategorien (Hochformat, Querformat, klein, mittel, groß).

Es ist nicht nur eine statische Definition – es ist das Rückgrat dafür, wie reaktionsfähiges Verhalten dynamisch generiert wird.

---

So funktionieren Sass-Maps in MkDocs-Mixins

Das Theme nutzt eine Reihe von Funktionen und Mixins, um Daten aus der $break-devices-Karte zu extrahieren und zu nutzen. Hier ist eine Aufschlüsselung:

1. Haltepunktwerte extrahieren

Die Break-Select-Device-Funktion durchsucht die Karte, um die relevante Gerätekategorie zu finden und ruft die zugehörigen Haltepunkte ab.

Wenn mehrere Ebenen angegeben werden (z. B. mobiles Porträt), greift es tiefer in die Hierarchie ein.

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

• @for-Schleife: Diese Schleife läuft vom ersten bis zum letzten Element in der $device-Liste und stellt sicher, dass jede Ebene in der Hierarchie überprüft wird.
• @if-Bedingung: Dies prüft, ob der aktuelle Wert noch eine Karte ist, und setzt die Suche fort, wenn er wahr ist. Wenn nicht, wird der Vorgang mit einer Fehlermeldung abgebrochen.
• map.get: Eine integrierte Sass-Funktion, die mithilfe eines Schlüssels einen Wert aus der Karte abruft.

2. Medienabfragen erstellen

In SCSS ist ein Mixin ein wiederverwendbarer Codeblock, den Sie einmal definieren und im gesamten Stylesheet verwenden können.

Es hilft, Ihren Code trocken zu halten (Don't Repeat Yourself), indem es Ihnen ermöglicht, Stile oder Logik mehrmals einzubinden, ohne den Code zu wiederholen.

Wenn Sie beispielsweise eine Reihe von Stilen wiederholt anwenden müssen, können Sie ein Mixin erstellen und es bei Bedarf wiederverwenden:

Die Break-from-Device- und Break-to-Device-Mixins nutzen diese Funktion, um Medienabfragen dynamisch zu generieren. Zum Beispiel:

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

Dieses Mixin wendet Stile für eine in der Karte angegebene Mindestbreite an. Ein ähnlicher Ansatz wird für den Break-to-Device-Mixin verwendet, der auf eine maximale Breite abzielt.

---

Anwenden der Mixins

Um die Leistungsfähigkeit der Break-from-Device- und Break-to-Device-Mixins zu sehen, schauen wir uns praktische Beispiele an, wie man sie zur dynamischen Implementierung responsiver Stile verwendet.

Beispiel 1: Anwenden von Standardstilen für mobile Geräte

Standardmäßig wenden wir Stile für mobile Bildschirme mit einem Rasterlayout an, das gut auf kleinen Bildschirmen funktioniert, ohne dass ein Mixin erforderlich ist. Zum Beispiel:

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

In diesem Fall ist das Layout bereits für mobile Geräte optimiert. Die Basisstile richten sich standardmäßig an mobile Benutzer.

Um die Reaktionsfähigkeit für größere Bildschirme zu verbessern, können Sie den Break-from-Device-Mixin verwenden, um bestimmte Haltepunkte anzusprechen.

---

Beispiel 2: Targeting auf die Tablet-Landschaft

Auf kleineren Bildschirmen, wie z. B. Tablets bis zum Querformat-Haltepunkt, passen bestimmte Elemente wie die Seitenleiste aufgrund des begrenzten Platzes auf dem Bildschirm möglicherweise nicht gut.

In solchen Fällen können wir die Seitenleiste ausblenden und als Popover von links anzeigen, um den Hauptinhalt zu priorisieren. Zum Beispiel:

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• Tablet-Querformat: Bezieht sich auf die Tablet-Kategorie und ihre Unterkategorie „Querformat“ in der $break-devices-Karte.
• Die generierte Medienabfrage lautet:

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

Für Geräte, die größer als der Tablet-Querformat-Haltepunkt sind und auf denen mehr Platz auf dem Bildschirm zur Verfügung steht, können wir ein zweispaltiges Layout für eine verbesserte Inhaltsverteilung einführen. Dies kann mit dem Break-from-Device-Mixin erreicht werden:

@include break-to-device(tablet landscape) {
  .sidebar {
    display: none;
  }
}

• Die generierte Medienabfrage lautet:

  @media screen and (max-width: 1219px) {
    .sidebar {
      display: none;
    }
  }

---

Beispiel 3: Targeting von Desktops

Mit zunehmender Bildschirmgröße steht mehr Platz für die Präsentation von Inhalten zur Verfügung.

Für Desktops können wir das Rasterlayout anpassen, um je nach Bildschirmgröße drei oder vier Spalten zu erstellen, indem wir den Break-from-Device-Mixin verwenden.

Für kleine Desktops:

Wenn die Bildschirmgröße groß genug ist, um drei Spalten unterzubringen, gelten die folgenden Stile:

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

• Desktop klein: Bezieht sich auf die Desktop-Kategorie und ihre kleine Unterkategorie in der $break-devices-Karte.
• Die generierte Medienabfrage lautet:

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

Für große Desktops:

Für noch größere Bildschirme können wir vier Spalten erstellen, um die Bildschirmfläche optimal zu nutzen:

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• Desktop groß: Bezieht sich auf die Desktop-Kategorie und ihre große Unterkategorie in der $break-devices-Karte.
• Die generierte Medienabfrage lautet:

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

---

Architektonische Eleganz

Dieses Design zeigt die Absicht des Autors, Skalierbarkeit und Wartbarkeit in den Vordergrund zu stellen.

Durch die Abstraktion von Haltepunkten in einer einzigen Wahrheitsquelle und die Verwendung von Mixins für Medienabfragen haben sie ein System geschaffen, das:

• Ist einfach zu warten: Das Aktualisieren von Haltepunkten oder das Hinzufügen neuer Haltepunkte erfordert kein Durchsuchen der Codebasis.
• Verbessert die Lesbarkeit: Medienabfragen werden in logische, wiederverwendbare Komponenten abstrahiert.
• Fördert die Skalierbarkeit:Neue Geräte oder Kategorien können zur Karte hinzugefügt werden, ohne die bestehende Funktionalität zu beeinträchtigen.

---

Letzte Gedanken

Das Erkunden von MkDocs-Material hat meine Wertschätzung für durchdachtes Design in der Front-End-Architektur vertieft.

Die Verwendung von Sass-Karten, Mixins und hierarchischen Datenstrukturen ist eine Meisterklasse für wartbare und skalierbare Designsysteme.

Wenn Sie Ihre eigenen responsiven Stile erstellen oder verbessern möchten, sollten Sie die Einführung ähnlicher Techniken in Betracht ziehen.

Sind Sie in Ihren Projekten auf Sass-Karten gestoßen oder haben Sie diese verwendet? Ich würde gerne Ihre Erfahrungen und Erkenntnisse hören!

Möchten Sie tiefer in die Designwelt eintauchen? Schauen Sie sich unsere anderen Blogbeiträge an:

• Grundregeln des Designs für Nicht-Designer
• Leistungsstarke UI-Design- und Implementierungsprinzipien
• Tolle Widgets erstellen

Abonnieren Sie sich für eine wöchentliche Dosis Einblicke in Entwicklung, IT, Betrieb, Design, Führung und mehr.

Das obige ist der detaillierte Inhalt vonWie dieses SCSS-Projekt ausgehend von einer Karte organisiert bleibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!