Accessing map values with map-get in SASS - Mini Project: Build & Apply

Accessing map values with map-get in Sass

📖 Scenario: You are creating a simple style guide for a website. You want to store colors in a Sass map and then use those colors in your CSS rules.

🎯 Goal: Build a Sass stylesheet that defines a color map and uses map-get to apply colors to CSS selectors.

📋 What You'll Learn

Create a Sass map named $colors with specific color names and hex values

Create a variable named $primary-color that gets the value of blue from the $colors map using map-get

Use the $primary-color variable to set the background color of the body selector

Add a CSS rule for h1 that uses map-get directly to set the text color to red from the $colors map

💡 Why This Matters

🌍 Real World

Using Sass maps helps keep your styles organized and makes it easy to update colors or other values in one place.

💼 Career

Many front-end developers use Sass maps and map-get to manage design tokens and theme variables efficiently in real projects.

1

Create a Sass map with colors

Create a Sass map called $colors with these exact entries: red: #ff0000, blue: #0000ff, and green: #00ff00.

SASS

# Create a Sass map called $colors with red, blue, and green colors
# Your code here

Hint

Use parentheses ( ) to create a map and separate entries with commas.

2

Create a variable to get the blue color from the map

Create a variable called $primary-color and set it to the value of blue from the $colors map using map-get.

SASS

$colors: (
  red: #ff0000,
  blue: #0000ff,
  green: #00ff00
);

// Create $primary-color using map-get to get blue from $colors
# Your code here

Hint

Use map-get($colors, blue) to get the blue color from the map.

3

Use the primary color variable in the body selector

Write a CSS rule for body that sets the background-color property to the $primary-color variable.

SASS

$colors: (
  red: #ff0000,
  blue: #0000ff,
  green: #00ff00
);

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

// Add a body selector with background-color set to $primary-color
# Your code here

Hint

Use background-color: $primary-color; inside the body block.

4

Add an h1 selector using map-get directly

Add a CSS rule for h1 that sets the color property using map-get($colors, red) directly inside the rule.

SASS

$colors: (
  red: #ff0000,
  blue: #0000ff,
  green: #00ff00
);

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

body {
  background-color: $primary-color;
}

// Add an h1 selector with color set using map-get($colors, red)
# Your code here

Hint

Use color: map-get($colors, red); inside the h1 block.

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