Maps and Structured Design Tokens

A Sass map stores key-value pairs. Maps are useful for color palettes, spacing scales, typography levels, breakpoints, and component variants.

The sass:map module provides functions for retrieving values, checking keys, and producing updated maps. A map centralizes related data and makes repetitive generation possible.

Maps are especially valuable when a design system has several named variants. Instead of scattering individual values across multiple files, define a structured map and consume it through functions, mixins, or loops.

Map keys should be descriptive and stable. Treat changes to public token names as API changes when other components depend on them.

Define a Spacing Map

@use "sass:map";

$spacing: (
  xs: 0.25rem,
  sm: 0.5rem,
  md: 1rem,
  lg: 1.5rem,
  xl: 2rem
);

.card {
  padding: map.get($spacing, md);
}

.section {
  margin-block: map.get($spacing, xl);
}

💡 The $spacing map stores named spacing tokens. map.get() retrieves the value associated with a key. Centralized maps reduce duplication and make it easier to review a design system's approved values. When a token is missing, consider adding explicit validation instead of silently producing incomplete CSS.

Knowledge Check

Which Sass built-in module should you use to retrieve a value from a map?

Maps and Structured Design Tokens

STAY UPDATED WITH BYTES!