Built-in map functions in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a map in Sass?

A map in Sass is a collection of key-value pairs, similar to a dictionary or object, used to store related data together.

beginner

How do you create a map in Sass?

You create a map by using parentheses with key-value pairs separated by colons and commas, like: (color: red, size: 10px).

beginner

What does the map-get() function do in Sass?

The map-get() function retrieves the value associated with a given key from a map.

intermediate

How can you add or update a key-value pair in a Sass map?

Use the map-merge() function to add or update key-value pairs by merging two maps together.

beginner

What does the map-keys() function return?

The map-keys() function returns a list of all the keys in a Sass map.

Which Sass function retrieves a value from a map by its key?

A map-get()

B map-keys()

C map-merge()

D map-remove()

map-get() is used to get the value for a specific key in a Sass map.

What does map-merge() do in Sass?

A Combines two maps into one

B Deletes a key from a map

C Returns all keys in a map

D Retrieves a value by key

map-merge() combines two maps, adding or updating key-value pairs.

If you want a list of all keys in a Sass map, which function do you use?

A map-values()

B map-get()

C map-keys()

D map-merge()

map-keys() returns a list of all keys in the map.

How do you create a map with keys 'font' and 'size' in Sass?

A <font: Arial, size: 12px>

B [font: Arial, size: 12px]

C {font: Arial, size: 12px}

D (font: Arial, size: 12px)

Sass maps use parentheses with key: value pairs separated by commas.

Which function removes a key from a Sass map?

A map-pop()

B map-delete()

C map-erase()

D map-remove()

map-delete() deletes a key and its value from a Sass map.

Explain how to retrieve and update values in a Sass map using built-in functions.

Think about how you look up and change information in a dictionary.

Describe how you can list all keys or values from a Sass map and why this might be useful.

Imagine checking all the labels or items in a box.

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