Design token management in SASS

Introduction

Design tokens help keep colors, fonts, and sizes consistent across your website. They make it easy to change styles in one place and see updates everywhere.

When you want to use the same colors and fonts on many pages.

When you need to update your website's look quickly and easily.

When working with a team to keep styles consistent.

When building a design system or reusable style library.

When you want to avoid repeating the same values in your CSS.

Syntax

SASS

$token-name: value;

Design tokens are usually stored as variables in Sass using the $ sign.

Use clear names for tokens to know what they control, like $color-primary or $font-size-base.

Examples

This sets a primary color token to a blue shade.

SASS

$color-primary: #3498db;

This sets a base font size token using relative units for better scaling.

SASS

$font-size-base: 1rem;

This token controls small spacing used for padding or margins.

SASS

$spacing-small: 0.5rem;

Sample Program

This example shows how to define design tokens as Sass variables and use them in CSS rules. The button changes color slightly on hover using a Sass color function.

SASS

@use 'sass:color';

// Design tokens
$color-primary: #3498db;
$color-secondary: #2ecc71;
$font-size-base: 1rem;
$spacing-base: 1rem;

// Using tokens in styles
body {
  font-size: $font-size-base;
  color: $color-primary;
  margin: $spacing-base;
}

button {
  background-color: $color-secondary;
  color: white;
  padding: $spacing-base $spacing-base * 2;
  border: none;
  border-radius: 0.25rem;
  font-size: $font-size-base;
  cursor: pointer;
}

button:hover {
  background-color: color.scale($color-secondary, $lightness: -10%);
}

Important Notes

Use relative units like rem for font sizes and spacing to improve accessibility and responsiveness.

Keep token names simple and meaningful to make your code easier to understand.

Design tokens can be grouped in separate files for better organization in bigger projects.

Summary

Design tokens are variables that store style values like colors and sizes.

They help keep your website's look consistent and easy to update.

Use Sass variables to create and manage design tokens in your stylesheets.