sass:map module - 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'

A.get

B.get()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after the dot like map.get() which causes syntax errors.

The map.get function is used without parentheses after the dot. The correct syntax is map.get($map, $key).

2fill in blank

medium

Complete the code to check if the key 'font' exists in the map.

SASS

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

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

A.contains

B.has()

C.exists

D.has

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.contains or map.exists which are not valid functions.

The map.has function checks if a key exists in a map. The correct syntax is map.has($map, $key).

3fill in blank

hard

Fix the error in the code to add a new key 'size' with value 'large' to the map.

SASS

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

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

A.put

B.set

C.insert

D.add

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.add or map.put which do not exist.

The correct function to add or update a key-value pair in a map is map.set. It returns a new map with the added or updated pair.

4fill in blank

hard

Fill both blanks to create a new map with only keys that have values longer than 3 characters.

SASS

$theme: ("color": "blue", "font": "Arial", "size": "lg");
$filtered: map.filter($theme, ($key, $value) -> str[1]($value) [2] 3);

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

A.length

B>

C<

D.size

Attempts:

3 left

💡 Hint

Common Mistakes

Using str.size which is not a valid function.

Using < instead of > which filters the wrong values.

The str.length function gets the length of a string. We want values with length greater than 3, so we use >.

5fill in blank

hard

Fill all three blanks to create a new map with keys uppercased and values unchanged, only for keys that contain the letter 'o'.

SASS

$theme: ("color": "blue", "font": "Arial", "size": "large");
$filtered: map.filter($theme, ($key, $value) -> str[1]($key, "o") [2] 0);
$result: map.map($filtered, ($key, $value) -> ([3]: $value));

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

A.index

B>

C$key.uppercase()

D>=

Attempts:

3 left

💡 Hint

Common Mistakes

Using str.index-of instead of str.index.

Using wrong comparison like < or == null.

Using str.contains which does not exist in Sass.

Not uppercasing keys correctly.

str.index($key, "o") returns the 1-based index of 'o' or null if not found. null > 0 is false and any index >= 1 > 0 is true, so it filters keys containing 'o'. Then map.map uppercases keys with $key.uppercase().

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