Accessing map values with map-get in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the color value from the map.

SASS

$colors: (primary: #ff0000, secondary: #00ff00);
$main-color: map-get($colors, [1]);

Drag options to blanks, or click blank then click option'

Abackground

Bfont

Cprimary

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using a key that does not exist in the map.

Forgetting to use quotes around the key (not needed in Sass maps).

The map-get function retrieves the value for the key primary from the $colors map.

2fill in blank

medium

Complete the code to get the font size from the map.

SASS

$settings: (font-size: 16px, line-height: 1.5);
$size: map-get($settings, [1]);

Drag options to blanks, or click blank then click option'

Afont-size

Bmargin

Ccolor

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys unrelated to font size.

Confusing property names with CSS properties.

The map-get function fetches the value for the key font-size from the $settings map.

3fill in blank

hard

Fix the error in the code to correctly get the padding value.

SASS

$layout: (margin: 10px, padding: 20px);
$pad: map-get($layout, [1]);

Drag options to blanks, or click blank then click option'

Apadding

Bmargin

Cborder

Dspacing

Attempts:

3 left

💡 Hint

Common Mistakes

Using a key not present in the map.

Mixing up margin and padding keys.

The key padding exists in the $layout map and is used to get the padding value.

4fill in blank

hard

Fill both blanks to get the correct values from the map.

SASS

$theme: (color: #333, font: Arial);
$text-color: map-get($theme, [1]);
$font-family: map-get($theme, [2]);

Drag options to blanks, or click blank then click option'

Acolor

Bfont

Cbackground

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys that do not exist in the map.

Swapping the keys for color and font.

The keys color and font are used to get the text color and font family from the $theme map.

5fill in blank

hard

Fill all three blanks to correctly access values from the map.

SASS

$config: (width: 100px, height: 200px, display: block);
$w: map-get($config, [1]);
$h: map-get($config, [2]);
$d: map-get($config, [3]);

Drag options to blanks, or click blank then click option'

Awidth

Bheight

Cdisplay

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys not present in the map like margin.

Mixing the order of keys.

The keys width, height, and display are used to get their respective values from the $config map.

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