Creating and Accessing SASS Maps

A SASS map is an ordered collection of key-value pairs enclosed in parentheses. Keys and values can be any SASS data type — strings, numbers, colors, lists, even other maps. Maps are declared with the syntax `$map: (key: value, key: value)` and accessed using functions from the `sass:map` module. The primary access function is `map.get($map, $key)`, which returns the value for the given key or `null` if the key does not exist. `map.has-key($map, $key)` returns a boolean indicating whether a key is present. `map.keys($map)` and `map.values($map)` return lists of all keys and all values respectively, which can then be iterated with `@each`. Maps are the SASS equivalent of configuration objects or lookup tables. They are widely used to store design tokens — color palettes, spacing scales, typography scales, breakpoints — because they keep related values together and make it easy to add, remove, or rename values in one place without searching the whole codebase.

Example

// ── Defining SASS maps ────────────────────────────────────────────────────────

@use 'sass:map';

// Simple key-value map
$font-sizes: (
    'xs'  : 0.75rem,
    'sm'  : 0.875rem,
    'base': 1rem,
    'lg'  : 1.125rem,
    'xl'  : 1.25rem,
    '2xl' : 1.5rem,
    '3xl' : 1.875rem,
    '4xl' : 2.25rem
);

// Accessing map values
body   { font-size: map.get($font-sizes, 'base'); }
small  { font-size: map.get($font-sizes, 'sm');   }
.lead  { font-size: map.get($font-sizes, 'lg');   }

// ── Generating utility classes from a map ─────────────────────────────────────

@each $name, $size in $font-sizes {
    .text-#{$name} { font-size: $size; }
}

// ── Nested maps for structured data ──────────────────────────────────────────

$palette: (
    'blue': (
        '100': #dbeafe,
        '300': #93c5fd,
        '500': #3b82f6,
        '700': #1d4ed8,
        '900': #1e3a8a
    ),
    'green': (
        '100': #dcfce7,
        '300': #86efac,
        '500': #22c55e,
        '700': #15803d,
        '900': #14532d
    )
);

// Access a nested map value
$blue-500 : map.get(map.get($palette, 'blue'), '500');
$green-700: map.get(map.get($palette, 'green'), '700');

.link       { color: $blue-500; }
.success    { color: $green-700; }

// map.has-key for safe access
@mixin use-palette($color, $shade) {
    @if map.has-key($palette, $color) {
        $shades: map.get($palette, $color);
        @if map.has-key($shades, $shade) {
            background: map.get($shades, $shade);
        } @else {
            @warn "Shade `#{$shade}` not found in `#{$color}`.";
        }
    } @else {
        @warn "Color `#{$color}` not found in palette.";
    }
}

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