sass:map module - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the sass:map module used for?

The sass:map module provides functions to work with maps in Sass, like adding, removing, or getting values by keys.

beginner

How do you get a value from a Sass map?

Use map.get($map, $key) to retrieve the value for a specific key in a map.

beginner

What does map.has-key($map, $key) do?

It checks if the map contains the given key and returns true or false.

intermediate

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

Use map.set($map, $key, $value) to add a new pair or update an existing key's value.

beginner

What happens if you try to get a key that does not exist in a Sass map?

The map.get function returns null if the key is not found in the map.

Which function checks if a key exists in a Sass map?

A map.has-key()

B map.get()

C map.set()

D map.remove()

map.has-key() returns true if the key exists in the map, otherwise false.

How do you add a new key-value pair to a Sass map?

A map.push()

B map.add()

C map.set()

D map.insert()

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

What does map.get($map, $key) return if the key is missing?

A 0

B An empty string

C An error

D null

If the key is not found, map.get() returns null.

Which module must you import to use Sass map functions?

A sass:list

B sass:map

C sass:string

D sass:color

The sass:map module contains all map-related functions.

How do you remove a key from a Sass map?

A map.remove()

B map.unset()

C map.delete()

D map.remove-key()

map.remove($map, $key) removes the key and its value from the map.

Explain how to check if a key exists in a Sass map and retrieve its value safely.

Think about first checking the key, then getting the value.

Describe how to add a new key-value pair to a Sass map and update an existing key's value.

Remember Sass maps are immutable, so you get a new map back.

Practice

1. What is the main purpose of the sass:map module in Sass?

easy

A. To create animations in Sass

B. To handle media queries automatically

C. To manage key-value pairs easily in Sass stylesheets

D. To compile Sass files into CSS

Solution

1. Step 1: Understand the role of sass:map

   The sass:map module provides functions to work with maps, which are collections of key-value pairs.

2. Step 2: Identify the correct purpose

   Since maps store key-value pairs, the module helps manage these pairs easily in Sass stylesheets.

3. Final Answer:

   To manage key-value pairs easily in Sass stylesheets -> Option C

4. Quick Check:

   sass:map manages key-value pairs = B [OK]

Hint: Remember: sass:map is for key-value pairs management [OK]

Common Mistakes:

• Confusing sass:map with animation or media query features
• Thinking sass:map compiles Sass to CSS
• Assuming sass:map handles layout or grid

2. Which of the following is the correct syntax to get a value from a Sass map named $colors for the key primary using the sass:map module?

easy

A. map-get($colors, primary)

B. map-get($colors primary)

C. map-get(primary, $colors)

D. map-get($colors, 'primary')

Solution

1. Step 1: Recall the syntax of map-get

   The correct syntax is map-get($map, key) without quotes around the key unless it is a string literal.

2. Step 2: Apply to the example

   Here, $colors is the map and primary is the key, so map-get($colors, primary) is correct.

3. Final Answer:

   map-get($colors, primary) -> Option A

4. Quick Check:

   map-get(map, key) syntax = A [OK]

Hint: Use map-get(map, key) with comma and no quotes for keys [OK]

Common Mistakes:

• Omitting the comma between map and key
• Swapping the order of arguments
• Adding quotes around keys unnecessarily

3. Given the Sass map:

$theme-colors: (primary: #0055ff, secondary: #ff5500);

What will be the output CSS color for color: map-get($theme-colors, secondary);?

medium

A. #0055ff

B. #ff5500

C. secondary

D. Error: key not found

Solution

1. Step 1: Identify the map key-value pairs

   The map $theme-colors has primary: #0055ff and secondary: #ff5500.

2. Step 2: Get the value for key secondary

   Using map-get($theme-colors, secondary) returns #ff5500.

3. Final Answer:

   #ff5500 -> Option B

4. Quick Check:

   map-get returns value for key = #ff5500 [OK]

Hint: Look up the key in the map to find its color value [OK]

Common Mistakes:

• Confusing primary and secondary values
• Expecting the key name as output instead of value
• Assuming an error when key exists

4. What is wrong with this Sass code snippet?

$settings: (font-size: 16px, color: blue);
$new-settings: map-merge($settings color: red);

medium

A. Missing comma between map and new pair in map-merge

B. map-merge cannot add new keys

C. Keys must be quoted strings

D. map-merge requires three arguments

Solution

1. Step 1: Check map-merge syntax

   The correct syntax is map-merge($map, (key: value)) with a comma separating arguments and the new pairs inside parentheses.

2. Step 2: Identify the error in the snippet

   The snippet misses a comma between $settings and the new pair color: red, and the new pair is not wrapped in parentheses.

3. Final Answer:

   Missing comma between map and new pair in map-merge -> Option A

4. Quick Check:

   map-merge needs comma and parentheses = D [OK]

Hint: Always separate arguments with commas and wrap new pairs in parentheses [OK]

Common Mistakes:

• Omitting commas between arguments
• Not wrapping new key-value pairs in parentheses
• Thinking keys must be quoted

5. You have a Sass map:

$sizes: (small: 1rem, medium: 2rem, large: 3rem);

How can you create a new map $updated-sizes that changes medium to 2.5rem but keeps other sizes unchanged using sass:map functions?

hard

A. $updated-sizes: map-set($sizes, medium, 2.5rem);

B. $updated-sizes: map-get($sizes, medium: 2.5rem);

C. $updated-sizes: map-remove($sizes, medium); map-merge($sizes, (medium: 2.5rem));

D. $updated-sizes: map-merge($sizes, (medium: 2.5rem));

Solution

1. Step 1: Understand how to update a map key

   To update a key's value, map-merge can merge the original map with a new map containing the updated key-value pair.

2. Step 2: Apply map-merge to update medium

   Using map-merge($sizes, (medium: 2.5rem)) replaces the medium value while keeping others unchanged.

3. Final Answer:

   $updated-sizes: map-merge($sizes, (medium: 2.5rem)); -> Option D

4. Quick Check:

   Use map-merge to update keys = C [OK]

Hint: Use map-merge with new key-value pair to update map [OK]

Common Mistakes:

• Using map-get instead of map-merge to update
• Trying map-set with wrong argument format
• Removing key before merging unnecessarily