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!
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.
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:
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;
}
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.
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.
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.
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}";
}
}
.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;
}
}
@media screen and (max-width: 1219px) {
.sidebar {
display: none;
}
}
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.
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;
@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 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}";
}
}
.grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}
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:
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:
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!
securefx kann keine Verbindung herstellen
Welche Datenerfassungstechnologien gibt es?
Verwendung von #include in der C-Sprache
So erstellen Sie eine ISO-Datei
So lösen Sie verstümmelte Filezilla-Zeichen
Was tun, wenn der Remote-Desktop keine Verbindung herstellen kann?
Was soll ich tun, wenn mein Laufwerk C rot wird?
So stellen Sie den Browserverlauf auf dem Computer wieder her
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
