Sass — Maps

Basic map

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

.button {
  background: map-get($colors, primary);
}

Accessing maps

$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px
);

// Direct access
.container {
  max-width: map-get($breakpoints, desktop);
}

// Check existence
@each $name, $width in $breakpoints {
  @media (min-width: $width) {
    .grid-#{$name} {
      display: grid;
    }
  }
}

Nested maps

$theme: (
  colors: (
    primary: #3498db,
    text: #333
  ),
  spacing: (
    sm: 8px,
    md: 16px,
    lg: 32px
  )
);

.button {
  background: map-get(map-get($theme, colors), primary);
  padding: map-get(map-get($theme, spacing), md);
}

Merge maps

$defaults: (font: Arial, size: 16px);
$custom: (font: Helvetica, color: #333);

$merged: map-merge($defaults, $custom);

body {
  font-family: map-get($merged, font);  // Helvetica
  font-size: map-get($merged, size);    // 16px
}

Loop through maps

$shades: (
  100: #f8f9fa,
  200: #e9ecef,
  300: #dee2e6,
  600: #6c757d,
  900: #212529
);

@each $shade, $color in $shades {
  .gray-#{$shade} {
    background: $color;
  }
}

Remove from map

$map: (a: 1, b: 2, c: 3);
$without-b: map-remove($map, b);
// Result: (a: 1, c: 3)

Has-key check

$tokens: (primary: #3498db);

@each $key in (primary, secondary, danger) {
  @if map-has-key($tokens, $key) {
    .text-#{$key} {
      color: map-get($tokens, $key);
    }
  }
}

Mini Practice

1. Create a design token map for colors
2. Build a spacing scale map
3. Generate utility classes from a map
4. Use nested maps for component theming

Up Next

Continue with Modules — organizing code with @use and @forward.