Cara membuat token tipografi untuk sistem reka bentuk menggunakan campuran Sass

Banyak sistem reka bentuk bermula dengan token reka bentuk asas untuk perkara seperti warna dan saiz, yang boleh diterjemahkan dengan mudah ke dalam pembolehubah CSS (atau Sass, atau Less, dll.).

// 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;
    }
}

Tambahan logik seterusnya pada koleksi token anda ialah fon. Dan semasa anda boleh menggunakan corak di atas pada fon, kebanyakan pereka yang pernah saya temui memikirkan tentang tipografi secara keseluruhan. Fon dan beratnya mempengaruhi saiz dan ketinggian garisnya — semuanya adalah pakej.

Dalam erti kata lain, tipografi dianggap sebagai kelas. Ini ialah kes penggunaan yang bagus untuk campuran Sass (atau Kurang) (malangnya, pada masa ini tiada yang setara dalam CSS asli).

Ini contohnya:

// 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;   
    }   
}

Setiap h2 dan h3 dalam mana-mana komponen dengan kelas beberapa komponen akan mendapat semua gaya yang ditakrifkan dalam campuran yang disertakan — jenis huruf, saiz fon, berat fon, ketinggian garis — dan kami bebas untuk memanjangkannya dengan menambahkan beberapa padding (anda mengimport dari fail luar dengan menggunakan @use). Anda juga boleh menulis ganti mana-mana nilai campuran, jika perlu (atau jika anda mahu membuat mata pereka berkedut).

Ini adalah pendekatan yang saya ambil semasa membina sistem reka bentuk di Dictionary.com. Ia pastinya membantu menyelaraskan usaha reka bentuk semula rumah kami (Thesaurus.com, juga!) dan menyemak imbas halaman (/browse/light ialah contoh utama), yang dilancarkan awal tahun ini.

Gunakan campuran untuk mencipta blok binaan yang berkuasa dalam sistem reka bentuk anda.

Atas ialah kandungan terperinci Cara membuat token tipografi untuk sistem reka bentuk menggunakan campuran Sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!