Maps for grouped values in SASS

Introduction

Maps help you keep related values together in one place. This makes your styles easier to manage and update.

When you want to store colors for different themes in one place.

When you have multiple font sizes for headings and want to organize them.

When you need to group spacing values like padding and margin for consistency.

When you want to keep breakpoints for responsive design grouped together.

When you want to reuse grouped style settings across your project.

Syntax

SASS

$map-name: (key1: value1, key2: value2, key3: value3);

Use parentheses () to define a map.

Keys and values are separated by a colon :, and pairs are separated by commas.

Examples

This map groups three color values with descriptive keys.

SASS

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

This map groups font sizes for easy reuse.

SASS

$font-sizes: (small: 0.8rem, medium: 1rem, large: 1.5rem);

This map groups spacing values for padding and margin.

SASS

$spacing: (padding: 1rem, margin: 2rem);

Sample Program

This example shows a map called $theme-colors holding three colors. We use map.get() to get colors for different button styles. This keeps colors grouped and easy to change.

SASS

@use 'sass:map';

$theme-colors: (
  primary: #005f73,
  secondary: #0a9396,
  accent: #94d2bd
);

.button {
  background-color: map.get($theme-colors, primary);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}

.button-accent {
  background-color: map.get($theme-colors, accent);
  color: black;
}

Important Notes

You can use map.get() to access values by their keys.

Maps can hold any type of value, including numbers, colors, strings, or even other maps.

Grouping values in maps helps keep your code clean and easy to update.

Summary

Maps group related values together for easy management.

Use keys to name values and map.get() to retrieve them.

This makes your styles more organized and easier to maintain.