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