Comment créer des jetons de typographie pour un système de conception à l'aide des mixins Sass

De nombreux systèmes de conception commencent avec des jetons de conception de base pour des éléments tels que les couleurs et les tailles, qui peuvent être facilement traduits en variables CSS (ou Sass, ou 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;
    }
}

Le prochain ajout logique à votre collection de jetons est celui des polices. Et même si vous pouvez appliquer le modèle ci-dessus aux polices, la plupart des designers que j'ai rencontrés pensent à la typographie dans son ensemble. La police et son poids influencent sa taille et sa hauteur de ligne : c'est un tout.

En d'autres termes, la typographie est traitée comme une classe. C'est un excellent cas d'utilisation pour un mixin Sass (ou Less) (malheureusement, il n'y a actuellement pas d'équivalent en CSS natif).

Voici un exemple :

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

Chaque h2 et h3 au sein de n'importe quel composant avec la classe some-component obtiendra tous les styles définis dans son mixin inclus - font-family, font-size, font-weight, line-height - et nous sommes libres de l'étendre en ajoutant du remplissage (vous importez à partir d'un fichier externe en utilisant @use). Vous pouvez également écraser n'importe quelle valeur de mixage, si nécessaire (ou si vous souhaitez faire trembler les yeux d'un concepteur).

C'est l'approche que j'ai adoptée lors de la création d'un système de conception sur Dictionary.com. Cela a certainement contribué à rationaliser les efforts de refonte de notre page d'accueil (Thesaurus.com également !) et de nos pages de navigation (/browse/light en est l'exemple par excellence), qui ont été lancées plus tôt cette année.

Exploitez les mixins pour créer de puissants éléments de base au sein de votre système de conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!