Maps as Design Token Systems

Maps are the foundation of scalable design token systems in SASS. By encoding all design decisions — colors, typography, spacing, shadows, border radii, z-indices — into structured maps, you create a single source of truth that can be iterated over to generate utility classes, CSS custom properties, and component variants automatically. A well-designed token map system uses nested maps to group related tokens. A top-level `$tokens` map might contain nested maps for `colors`, `typography`, `spacing`, and `elevation`. A utility-generation mixin walks this structure with `@each` loops to produce the corresponding CSS. Adding a new token anywhere in the map immediately makes it available as a utility class without any additional work. The token map approach also integrates cleanly with CSS custom property output. A single `@each` loop over the token map can emit all tokens as `--token-name: value` declarations on `:root`, giving you both SASS-time access to the values and runtime CSS custom property access for dynamic theming. This bridge between SASS compile-time and CSS runtime is the sweet spot of modern SASS architecture.

Example

// ── Complete design token system using maps ───────────────────────────────────

@use 'sass:map';

$tokens: (
    'color': (
        'primary'  : #3498db,
        'secondary': #2ecc71,
        'danger'   : #e74c3c,
        'warning'  : #f39c12,
        'neutral'  : #6c757d,
        'dark'     : #2c3e50,
        'light'    : #ecf0f1
    ),
    'font-size': (
        'sm'  : 0.875rem,
        'base': 1rem,
        'lg'  : 1.125rem,
        'xl'  : 1.25rem,
        '2xl' : 1.5rem,
        '3xl' : 1.875rem
    ),
    'radius': (
        'sm': 2px,
        'md': 4px,
        'lg': 8px,
        'xl': 16px,
        'full': 9999px
    )
);

// ── Emit all tokens as CSS custom properties ──────────────────────────────────

:root {
    @each $group, $values in $tokens {
        @each $name, $value in $values {
            --#{$group}-#{$name}: #{$value};
        }
    }
}

// Produces: --color-primary: #3498db; --font-size-base: 1rem; etc.

// ── Helper function for type-safe token access ────────────────────────────────

@function token($group, $name) {
    $group-map: map.get($tokens, $group);
    @if not $group-map { @error "Token group `#{$group}` not found."; }

    $value: map.get($group-map, $name);
    @if not $value { @error "Token `#{$name}` not found in group `#{$group}`."; }

    @return $value;
}

// ── Using the token function ──────────────────────────────────────────────────

.btn-primary {
    background   : token('color', 'primary');
    font-size    : token('font-size', 'base');
    border-radius: token('radius', 'md');
    color        : #fff;
    padding      : 0.5rem 1rem;
}

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned