Why Maps for grouped values in SASS? - Purpose & Use Cases

The Big Idea

Discover how grouping style values can save you hours of tedious updates!

The Scenario

Imagine you are styling a website with many colors and fonts. You write each color and font style separately everywhere in your CSS.

The Problem

If you want to change a color or font, you must find and update every single place manually. This is slow and easy to miss some spots, causing inconsistent styles.

The Solution

Using maps for grouped values lets you store related styles together in one place. You can change a value once, and all styles using it update automatically.

Before vs After

✗ Before

$primary-color: #333;
$secondary-color: #666;
$font-main: 'Arial', sans-serif;

.button {
  color: $primary-color;
  font-family: $font-main;
}
.alert {
  color: $secondary-color;
  font-family: $font-main;
}

✓ After

$theme: (
  colors: (
    primary: #333,
    secondary: #666
  ),
  fonts: (
    main: 'Arial', sans-serif
  )
);

.button {
  color: map-get(map-get($theme, 'colors'), 'primary');
  font-family: map-get(map-get($theme, 'fonts'), 'main');
}
.alert {
  color: map-get(map-get($theme, 'colors'), 'secondary');
  font-family: map-get(map-get($theme, 'fonts'), 'main');
}

What It Enables

You can organize and update your styles easily, keeping your design consistent and your code clean.

Real Life Example

A design system where colors, fonts, and spacing are grouped in maps, so changing the brand color updates the entire website instantly.

Key Takeaways

Manual style updates are slow and error-prone.

Maps group related style values in one place.

Changing a map value updates all uses automatically.