So erstellen Sie Typografie-Tokens für ein Designsystem mithilfe von Sass-Mixins

Viele Designsysteme beginnen mit grundlegenden Design-Tokens für Dinge wie Farben und Größen, die leicht in CSS-Variablen (oder Sass oder Less usw.) übersetzt werden können.

// tokens.scss
$primary-text-color: #aaa;
$secondary-text-color: #ccc;

$size-s: 8px;
$size-m: 16px;

// some-component.scss
.some-component {
    color: $primary-text-color;
    padding: $size-s $size-m;

    h4 {
        color: $secondary-text-color;
    }
}

Die nächste logische Ergänzung Ihrer Token-Sammlung sind Schriftarten. Und obwohl Sie das obige Muster auf Schriftarten anwenden können, denken die meisten Designer, die ich je getroffen habe, über Typografie als Ganzes nach. Die Schriftart und ihre Stärke beeinflussen die Größe und Zeilenhöhe – es ist alles ein Pauschalangebot.

Mit anderen Worten, Typografie wird als Klasse behandelt. Dies ist ein großartiger Anwendungsfall für ein Sass- (oder Less-) Mixin (leider gibt es derzeit kein Äquivalent in nativem CSS).

Hier ist ein Beispiel:

// tokens.scss
$font-sans-serif: Aria, Helvetica, sans-serif;

$size-s: 8px;
$size-m: 16px;
$size-l: 24px;
$size-xl: 48px;

@mixin heading-sans-serif-l {
    font-family: $font-sans-serif;
    font-size: $size-l;
    font-weight: 700;
    line-height: 1.3;
}

@mixin heading-sans-serif-xl {
    font-family: $font-sans-serif;
    font-size: $size-xl;
    font-weight: 700;
    line-height: 1.4;
}

// some-component.scss
@use "tokens";

.some-component {

    h2 {
        @include tokens.heading-sans-serif-xl;

        padding: $size-l $size-xl;  
    }

    h3 {
        @include tokens.heading-sans-serif-l;

        padding: $size-s $size-m;   
    }   
}

Jedes h2 und h3 innerhalb einer beliebigen Komponente mit der Some-Component-Klasse erhält alle der im enthaltenen Mixin definierten Stile – Schriftfamilie, Schriftgröße, Schriftstärke, Zeilenhöhe – und es steht uns frei, es zu erweitern, indem wir etwas Auffüllung hinzufügen (Sie importieren aus einer externen Datei mit @use). Bei Bedarf können Sie auch alle Mixin-Werte überschreiben (oder wenn Sie die Augen eines Designers zum Zucken bringen möchten).

Dies ist der Ansatz, den ich beim Aufbau eines Designsystems bei Dictionary.com gewählt habe. Es hat definitiv dazu beigetragen, die Neugestaltung unserer Startseite (auch Thesaurus.com!) und der Suchseiten (/browse/light ist das Paradebeispiel dafür) zu rationalisieren, die Anfang dieses Jahres eingeführt wurden.

Nutzen Sie Mixins, um leistungsstarke Bausteine ​​innerhalb Ihres Designsystems zu erstellen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Typografie-Tokens für ein Designsystem mithilfe von Sass-Mixins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!