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

A lot of design systems start out with basic design tokens for things like colors and sizes, which can be easily translated into CSS variables (or Sass, or Less, etc.).

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

The next logical addition to your collection of tokens is fonts. And while you can apply the above pattern to fonts, most designers I’ve ever encountered think about typography as a whole. The font and its weight influence its size and line-height — it’s all a package deal.

In other words, typography is treated as a class. This is a great use case for a Sass (or Less) mixin (unfortunately, there’s currently no equivalent in native CSS).

Here’s an example:

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

Every h2 and h3 within any component with the some-component class will get all of the styles defined within its included mixin — font-family, font-size, font-weight, line-height — and we’re free to extend it by adding in some padding (you import from an outside file by using @use). You could also overwrite any of the mixin values, if necessary (or if you want to make a designer’s eyes twitch).

This is the approach I took when building out a design system at Dictionary.com. It definitely helped streamline the redesign effort of our home (Thesaurus.com, too!) and browse pages (/browse/light is the quintessential example), which launched earlier this year.

Leverage mixins to create powerful building blocks within your design system.

The above is the detailed content of How to create typography tokens for a design system using Sass mixins. For more information, please follow other related articles on the PHP Chinese website!