Built-in map functions in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the following Sass map function return?

Consider this Sass code:

$colors: (primary: #333, secondary: #666, accent: #f06);
$keys: map-keys($colors);

What is the value of $keys?

SASS

$colors: (primary: #333, secondary: #666, accent: #f06);
$keys: map-keys($colors);

A (0, 1, 2)

B (primary, secondary, accent)

C (primary: #333, secondary: #666, accent: #f06)

D (#333, #666, #f06)

💡 Hint

Think about what keys mean in a map: they are the names, not the values.

The map-keys() function returns a list of all the keys in the map. Here, the keys are primary, secondary, and accent.

📝 Syntax

intermediate

Which option correctly retrieves the value for 'secondary' from a Sass map?

Given this Sass map:

$palette: (primary: #111, secondary: #222, tertiary: #333);

Which code correctly gets the value #222?

SASS

$palette: (primary: #111, secondary: #222, tertiary: #333);

A $palette['secondary']

B map-get($palette, 'secondary')

C map-get($palette, "secondary")

D map-get($palette, secondary)

💡 Hint

Keys in Sass maps are identifiers, not strings unless quoted.

In Sass, map keys can be unquoted identifiers. Using map-get($palette, secondary) correctly retrieves the value. Using quotes treats the key as a string which does not match the unquoted key.

❓ rendering

advanced

What color will the button background be after this Sass code compiles?

Given this Sass code:

$theme-colors: (primary: #0055ff, danger: #ff0000);
.btn {
  background-color: map-get($theme-colors, danger);
}

What color will the button have in the browser?

SASS

$theme-colors: (primary: #0055ff, danger: #ff0000);
.btn {
  background-color: map-get($theme-colors, danger);
}

A Red (#ff0000)

B Transparent

C Blue (#0055ff)

D Black (#000000)

💡 Hint

Look at which key is used in map-get for the background color.

The map-get function retrieves the value for the key danger, which is #ff0000 (red). So the button background will be red.

🧠 Conceptual

advanced

Which Sass function returns the number of key-value pairs?

You want to find out how many items are in a Sass map. Which function gives you this number?

A length()

B map-count()

C map-size()

D map-keys()

💡 Hint

Think about the function that measures how many pairs exist.

map-size() returns the number of key-value pairs in a Sass map. The other functions do not exist or return different data.

❓ accessibility

expert

How can Sass maps help improve accessibility in theming?

You want to create a theme with colors that adapt for better contrast and readability. How can Sass maps assist in this task?

A By storing color names and values in maps, you can easily switch themes and ensure consistent accessible colors.

B Sass maps automatically adjust colors for contrast without extra code.

C Maps allow you to write CSS that disables colors for screen readers.

D Using maps forces all colors to be grayscale, improving accessibility.

💡 Hint

Think about how organizing colors helps maintain consistent styles.

Sass maps let you group color values by name. This makes it easy to swap entire color sets for different themes, including high-contrast ones for accessibility. Sass itself does not automatically adjust colors or disable them for screen readers.

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()