Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

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