Built-in map functions in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the value of the key 'color' from the map.

SASS

$theme: ("color": blue, "font": "Arial");
$value: map[1]($theme, "color");

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

Aget

Bset

Cremove

Dhas-key

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.set instead of map.get

Using map.remove which deletes a key

Using map.has-key which returns a boolean

The map.get() function retrieves the value for a given key from a map.

2fill in blank

medium

Complete the code to add a new key-value pair to the map.

SASS

$settings: ("width": 100px);
$settings: map[1]($settings, "height", 200px);

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

Akeys

Bget

Cremove

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.get which only retrieves values

Using map.remove which deletes keys

Using map.keys which returns all keys

The map.set() function adds or updates a key-value pair in a map.

3fill in blank

hard

Fix the error in the code to check if the map contains the key 'font'.

SASS

$style: ("color": red, "font": "Helvetica");
$exists: map[1]($style, "font");

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

Aget

Bhas-key

Cset

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.get which returns the value, not a boolean

Using map.set which modifies the map

Using map.remove which deletes keys

The map.has-key() function checks if a key exists in a map and returns true or false.

4fill in blank

hard

Fill both blanks to create a new map with only the keys from the original map.

SASS

$colors: ("primary": #ff0000, "secondary": #00ff00);
$keys: map[1]($colors);
$new-map: map[2]();

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

Akeys

Bvalues

Cremove

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.values instead of map.keys

Using map.get instead of map.remove to create empty map

map.keys() returns all keys from a map.
map.remove() with no arguments creates an empty map.

5fill in blank

hard

Fill all three blanks to create a new map with uppercase keys and original values for keys with values greater than 10.

SASS

$data: ("a": 5, "b": 15, "c": 20);
$new-map: (
  [1]: [2] for [3] in map.keys($data) if map.get($data, [3]) > 10
);

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

Ato-upper-case()

Bmap.get($data, key)

Ckey

Dto-upper-case

Attempts:

3 left

💡 Hint

Common Mistakes

Using to-upper-case() with parentheses in the first blank

Using a wrong variable name instead of key

Not using map.get to get the value

Use to-upper-case to convert keys to uppercase.
Use map.get($data, key) to get the value.
Use key as the loop variable.

Practice

1. Which Sass built-in map function is used to check if a key exists in a map?
map-get(), map-has-key(), map-keys(), or map-values()?

easy

A. map-has-key()

B. map-get()

C. map-keys()

D. map-values()

Solution

1. Step 1: Understand the purpose of each function

   map-get() retrieves a value, map-keys() lists keys, map-values() lists values, and map-has-key() checks if a key exists.

2. Step 2: Identify the function that checks key existence

   The function map-has-key() returns true or false if a key is in the map.

3. Final Answer:

   map-has-key() -> Option A

4. Quick Check:

   Check key presence = map-has-key() [OK]

Hint: To check keys, use map-has-key() [OK]

Common Mistakes:

• Confusing map-get() with map-has-key()
• Using map-keys() to check key existence
• Thinking map-values() checks keys

2. Which of the following is the correct syntax to get the value for key "color" from a Sass map named $theme?

easy

A. map-get($theme, color)

B. map-get(color, $theme)

C. map-get($theme, $color)

D. map-get($theme, "color")

Solution

1. Step 1: Recall map-get() syntax

   The correct syntax is map-get($map, $key) where the key is a string or identifier.

2. Step 2: Identify correct key format

   Keys that are strings must be quoted with double or single quotes. Here, "color" is correct.

3. Final Answer:

   map-get($theme, "color") -> Option D

4. Quick Check:

   Correct syntax uses map-get($map, "key") [OK]

Hint: Use quotes around string keys in map-get() [OK]

Common Mistakes:

• Omitting quotes around string keys
• Swapping map and key order
• Using a variable ($color) instead of a quoted string key

3. Given the Sass map:

$settings: ("font": "Arial", "size": 16px, "color": #333);

What does map-keys($settings) return?

medium

A. ("font", "size", "color")

B. (font, size, color)

C. ["font", "size", "color"]

D. null

Solution

1. Step 1: Understand map-keys() output

   map-keys() returns a list of keys from the map, preserving quotes if keys are strings.

2. Step 2: Check keys in $settings

   Keys are strings: "font", "size", "color" so the output is a list with quoted strings.

3. Final Answer:

   ("font", "size", "color") -> Option A

4. Quick Check:

   map-keys() returns keys as list with quotes if keys are strings [OK]

Hint: map-keys() returns keys as a list with quotes if strings [OK]

Common Mistakes:

• Assuming keys lose quotes in output
• Confusing parentheses with brackets
• Expecting null or empty output

4. What is wrong with this Sass code?

$map: ("a": 1, "b": 2);
$value: map-get($map, c);

Choose the best explanation.

medium

A. map-get() cannot retrieve numeric values

B. Key c is missing quotes, causing an error

C. The map variable is not defined properly

D. map-get() requires three arguments

Solution

1. Step 1: Check map keys and usage

   The map keys are strings "a" and "b". The key used in map-get is c without quotes.

2. Step 2: Identify key type mismatch

   Since keys are strings, the key argument must be a string too. Missing quotes cause Sass to look for a variable c, which is undefined.

3. Final Answer:

   Key c is missing quotes, causing an error -> Option B

4. Quick Check:

   Keys must match type; string keys need quotes [OK]

Hint: Always quote string keys in map-get() [OK]

Common Mistakes:

• Forgetting quotes around string keys
• Thinking map-get needs 3 arguments
• Assuming map-get can't get numbers

5. You have a Sass map:

$colors: ("primary": #0055ff, "secondary": #ff5500, "tertiary": #00ff55);

Which Sass code correctly adds a new key-value pair "background": #f0f0f0 to $colors without overwriting existing keys?

hard

A. $new-colors: map-has-key($colors, "background", #f0f0f0);

B. $new-colors: map-get($colors, "background", #f0f0f0);

C. $new-colors: map-merge($colors, ("background": #f0f0f0));

D. $new-colors: map-keys($colors, "background": #f0f0f0);

Solution

1. Step 1: Understand how to add key-value pairs

   Sass maps are immutable, so to add a pair, use map-merge() which combines maps.

2. Step 2: Identify correct function usage

   map-merge($colors, ("background": #f0f0f0)) adds the new pair without removing existing ones.

3. Final Answer:

   $new-colors: map-merge($colors, ("background": #f0f0f0)); -> Option C

4. Quick Check:

   Use map-merge() to add keys without overwriting [OK]

Hint: Use map-merge() to add keys to Sass maps [OK]

Common Mistakes:

• Using map-get() to add keys
• Confusing map-has-key() with adding keys
• Trying to add keys with map-keys()