Accessing map values with map-get in SASS

Introduction

Maps in Sass let you store pairs of related information. Using map-get helps you find the value for a specific key easily.

You want to store colors with names and use them later in styles.

You have a list of font sizes labeled by purpose and want to apply them.

You keep spacing values grouped by size names and need to reuse them.

You want to organize theme settings and access them by keys.

Syntax

SASS

map-get($map, $key)

$map is the map variable you want to look inside.

$key is the name of the item you want to find.

Examples

This gets the value for primary from the $colors map and uses it as text color.

SASS

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

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

This sets the font size of a button using the medium size from the $sizes map.

SASS

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

.button {
  font-size: map-get($sizes, medium);
}

This applies padding and margin by getting values from the $spacing map.

SASS

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

.container {
  padding: map-get($spacing, padding);
  margin: map-get($spacing, margin);
}

Sample Program

This Sass code defines a map of theme colors. It then uses map-get to apply the background and text colors to the body. The .highlight class uses the highlight color from the map.

SASS

@use "sass:map";

$theme-colors: (
  background: #f0f0f0,
  text: #333333,
  highlight: #ffcc00
);

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

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

Important Notes

If the key does not exist in the map, map-get returns null.

Maps help keep your styles organized and easy to update.

Summary

map-get finds a value by its key inside a Sass map.

Use it to keep your style values neat and reusable.

Always check your keys to avoid getting null.

Practice

1. What does the Sass function map-get($map, $key) do?

easy

A. It adds a new key-value pair to the map.

B. It deletes a key from the map.

C. It returns the value associated with the given key in the map.

D. It converts the map into a list.

Solution

1. Step 1: Understand the purpose of map-get

   The function map-get is designed to retrieve a value from a Sass map using a key.

2. Step 2: Identify the correct behavior

   It does not modify the map but simply returns the value for the specified key.

3. Final Answer:

   It returns the value associated with the given key in the map. -> Option C

4. Quick Check:

   map-get returns value by key [OK]

Hint: Remember: map-get fetches values, it doesn't change the map. [OK]

Common Mistakes:

• Thinking map-get adds or removes keys
• Confusing map-get with map-merge
• Expecting map-get to return the whole map

2. Which of the following is the correct syntax to get the value of key "primary-color" from a Sass map $colors?

easy

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

B. map-get($colors, primary_color);

C. map-get($colors, 'primary_color');

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

Solution

1. Step 1: Check key format in Sass maps

   Keys that are strings must be quoted with double or single quotes in Sass.

2. Step 2: Identify correct syntax for string key

   Using double quotes around "primary-color" is correct; single quotes also work but only one option uses quotes properly.

3. Final Answer:

   map-get($colors, "primary-color"); -> Option A

4. Quick Check:

   String keys need quotes in map-get [OK]

Hint: Always quote string keys in map-get to avoid errors. [OK]

Common Mistakes:

• Not quoting string keys
• Using underscores instead of hyphens
• Confusing variable names with keys

3. Given the Sass map:

$settings: ("font-size": 16px, "color": #333, "margin": 1rem);

What will map-get($settings, "color") return?

medium

A. #333

B. 16px

C. 1rem

D. null

Solution

1. Step 1: Locate the key "color" in the map

   The map has a key "color" with value #333.

2. Step 2: Use map-get to retrieve the value

   Calling map-get with "color" returns #333 exactly.

3. Final Answer:

   #333 -> Option A

4. Quick Check:

   map-get returns #333 for "color" key [OK]

Hint: Match the key exactly to get the correct value. [OK]

Common Mistakes:

• Mixing up keys and values
• Expecting map-get to return the whole map
• Using wrong key names

4. What is the problem with this Sass code?

$theme: (primary: #0055ff, secondary: #ffaa00);
$color: map-get($theme, "primary");

medium

A. The key "primary" should not be quoted because keys are unquoted.

B. The map keys are unquoted but the key in map-get is quoted, causing null.

C. There is no problem; the code works correctly.

D. map-get requires the map variable to be quoted.

Solution

1. Step 1: Check key types in the map

   The map keys are unquoted identifiers: primary and secondary.

2. Step 2: Check key usage in map-get

   Using a quoted string "primary" does not match the unquoted key primary, so map-get returns null.

3. Final Answer:

   The map keys are unquoted but the key in map-get is quoted, causing null. -> Option B

4. Quick Check:

   Key types must match in map and map-get [OK]

Hint: Match quotes exactly between map keys and map-get keys. [OK]

Common Mistakes:

• Mixing quoted and unquoted keys
• Expecting map-get to find keys regardless of quotes
• Assuming map-get throws error on mismatch

5. You have a nested Sass map:

$themes: (
  light: ("background": #fff, "text": #000),
  dark: ("background": #000, "text": #fff)
);

How do you get the text color for the dark theme using map-get?

hard

A. map-get($themes, dark, text);

B. map-get($themes, "dark", "text");

C. map-get($themes[dark][text]);

D. map-get(map-get($themes, dark), "text");

Solution

1. Step 1: Understand nested map structure

   $themes is a map where each key (light, dark) maps to another map.

2. Step 2: Access nested map values step-by-step

   First, get the dark map with map-get($themes, dark), then get "text" from that map with map-get(..., "text").

3. Final Answer:

   map-get(map-get($themes, dark), "text"); -> Option D

4. Quick Check:

   Use nested map-get calls for nested maps [OK]

Hint: Use map-get inside map-get for nested maps. [OK]

Common Mistakes:

• Trying to pass multiple keys in one map-get
• Using incorrect syntax for nested access
• Assuming bracket notation works in Sass maps