Sass mixin を使用してデザイン システムのタイポグラフィ トークンを作成する方法

多くのデザイン システムは、色やサイズなどの基本的なデザイン トークンから始まり、CSS 変数 (または Sass、Less など) に簡単に変換できます。

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

トークンのコレクションに次に論理的に追加されるのはフォントです。上記のパターンをフォントに適用することはできますが、私がこれまで出会ったデザイナーのほとんどは、タイポグラフィー全体について考えています。フォントとその太さは、そのサイズと行の高さに影響します。それはすべてパッケージ取引です。

言い換えると、タイポグラフィは クラス として扱われます。これは、Sass (または Less) ミックスインの優れた使用例です (残念ながら、現在、ネイティブ CSS には同等のものはありません)。

これが例です:

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

some-component クラスを持つコンポーネント内のすべての h2 および h3 は、含まれているミックスイン内で定義されているスタイル (font-family、font-size、font-weight、line-height) の すべて を取得します。パディングを追加することで自由に拡張できます (@use を使用して外部ファイルからインポートします)。必要に応じて (またはデザイナーの目をけいれんさせたい場合)、ミックスインの値を上書きすることもできます。

これは、Dictionary.com でデザイン システムを構築するときに私がとったアプローチです。これは、今年初めにリリースされたホーム (Thesaurus.com も!) とブラウズ ページ (/browse/light が典型的な例) の再設計作業を効率化するのに間違いなく役立ちました。

ミックスインを活用して、デザイン システム内に強力なビルディング ブロックを作成します。

以上がSass mixin を使用してデザイン システムのタイポグラフィ トークンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。