sass:map module

Introduction

The sass:map module helps you work with maps in Sass easily. Maps are like little dictionaries that store pairs of keys and values.

When you want to store related style values together, like colors or font sizes.

When you need to look up a value by a name instead of remembering numbers.

When you want to update or add new style settings without changing many lines.

When you want to loop through style settings to create consistent CSS.

When you want to keep your styles organized and easy to read.

Syntax

SASS

@use "sass:map";

// Common functions:
map.get($map, $key)
map.set($map, $key, $value)
map.has-key($map, $key)
map.keys($map)
map.values($map)
map.merge($map1, $map2)
map.remove($map, $key)

You must first @use "sass:map"; to access these functions.

Maps store data as key-value pairs, like (key: value).

Examples

This gets the value for the key primary from the $colors map.

SASS

@use "sass:map";

$colors: (primary: #0055ff, secondary: #ff5500);

$primary-color: map.get($colors, primary);

This adds a new key font-weight with value bold to the $settings map.

SASS

@use "sass:map";

$settings: (font-size: 16px, line-height: 1.5);

$new-settings: map.set($settings, font-weight, bold);

This merges two maps. If keys overlap, values from the second map replace the first.

SASS

@use "sass:map";

$map1: (a: 1, b: 2);
$map2: (b: 3, c: 4);

$merged: map.merge($map1, $map2);

Sample Program

This Sass code uses the sass:map module to get and set colors in a map. It styles the body with background and text colors, links with the accent color, and a highlight class with a new color added to the map.

SASS

@use "sass:map";

$theme-colors: (
  background: #f0f0f0,
  text: #333333,
  accent: #ff6600
);

// Get the accent color
$accent-color: map.get($theme-colors, accent);

// Add a new color
$updated-colors: map.set($theme-colors, highlight, #00ccff);

body {
  background-color: map.get($updated-colors, background);
  color: map.get($updated-colors, text);
}

a {
  color: $accent-color;
}

.highlight {
  background-color: map.get($updated-colors, highlight);
  padding: 0.5rem;
  border-radius: 0.25rem;
}

Important Notes

Maps are great for grouping related style values, making your code cleaner.

Remember, map.set returns a new map; it does not change the original.

Use map.has-key to check if a key exists before getting its value.

Summary

The sass:map module helps manage key-value pairs in Sass.

Use it to get, set, merge, and check map values easily.

Maps keep your styles organized and easy to update.