首頁 > web前端 > css教學 > 主體

如何使用 Sass mixins 為設計系統建立版面標記

PHPz
發布: 2024-09-05 06:47:02
原創
834 人瀏覽過

How to create typography tokens for a design system using Sass mixins

許多設計系統都是從顏色和尺寸等基本設計標記開始的,這些標記可以輕鬆轉換為 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)mixin 的一個很好的用例(不幸的是,目前原生 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 都會獲得所有 在其包含的mixin 中定義的樣式— font-family、font-size、font-weight、 line-height —我們可以透過添加一些填充來自由擴展它(您可以使用@use從外部文件導入)。如果有必要(或者如果你想讓設計師眼花撩亂),你也可以覆蓋任何 mixin 值。

這是我在 Dictionary.com 建造設計系統時所採用的方法。它確實有助於簡化今年早些時候推出的主頁(Thesaurus.com!)和瀏覽頁面(/browse/light 是典型的例子)的重新設計工作。

利用 mixins 在您的設計系統中建立強大的構建塊。

以上是如何使用 Sass mixins 為設計系統建立版面標記的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!