Built-in map functions in SASS - 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'

Aget

Bset

Cremove

Dhas-key

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.set instead of map.get

Using map.remove which deletes a key

Using map.has-key which returns a boolean

The map.get() function retrieves the value for a given key from a map.

2fill in blank

medium

Complete the code to add a new key-value pair to the map.

SASS

$settings: ("width": 100px);
$settings: map[1]($settings, "height", 200px);

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

Akeys

Bget

Cremove

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.get which only retrieves values

Using map.remove which deletes keys

Using map.keys which returns all keys

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

3fill in blank

hard

Fix the error in the code to check if the map contains the key 'font'.

SASS

$style: ("color": red, "font": "Helvetica");
$exists: map[1]($style, "font");

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

Aget

Bhas-key

Cset

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.get which returns the value, not a boolean

Using map.set which modifies the map

Using map.remove which deletes keys

The map.has-key() function checks if a key exists in a map and returns true or false.

4fill in blank

hard

Fill both blanks to create a new map with only the keys from the original map.

SASS

$colors: ("primary": #ff0000, "secondary": #00ff00);
$keys: map[1]($colors);
$new-map: map[2]();

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

Akeys

Bvalues

Cremove

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using map.values instead of map.keys

Using map.get instead of map.remove to create empty map

map.keys() returns all keys from a map.
map.remove() with no arguments creates an empty map.

5fill in blank

hard

Fill all three blanks to create a new map with uppercase keys and original values for keys with values greater than 10.

SASS

$data: ("a": 5, "b": 15, "c": 20);
$new-map: (
  [1]: [2] for [3] in map.keys($data) if map.get($data, [3]) > 10
);

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

Ato-upper-case()

Bmap.get($data, key)

Ckey

Dto-upper-case

Attempts:

3 left

💡 Hint

Common Mistakes

Using to-upper-case() with parentheses in the first blank

Using a wrong variable name instead of key

Not using map.get to get the value

Use to-upper-case to convert keys to uppercase.
Use map.get($data, key) to get the value.
Use key as the loop variable.