Accessing map values with map-get in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the color value from the map.

SASS

$colors: (primary: #ff0000, secondary: #00ff00);
$main-color: map-get($colors, [1]);

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

Abackground

Bfont

Cprimary

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using a key that does not exist in the map.

Forgetting to use quotes around the key (not needed in Sass maps).

The map-get function retrieves the value for the key primary from the $colors map.

2fill in blank

medium

Complete the code to get the font size from the map.

SASS

$settings: (font-size: 16px, line-height: 1.5);
$size: map-get($settings, [1]);

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

Afont-size

Bmargin

Ccolor

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys unrelated to font size.

Confusing property names with CSS properties.

The map-get function fetches the value for the key font-size from the $settings map.

3fill in blank

hard

Fix the error in the code to correctly get the padding value.

SASS

$layout: (margin: 10px, padding: 20px);
$pad: map-get($layout, [1]);

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

Apadding

Bmargin

Cborder

Dspacing

Attempts:

3 left

💡 Hint

Common Mistakes

Using a key not present in the map.

Mixing up margin and padding keys.

The key padding exists in the $layout map and is used to get the padding value.

4fill in blank

hard

Fill both blanks to get the correct values from the map.

SASS

$theme: (color: #333, font: Arial);
$text-color: map-get($theme, [1]);
$font-family: map-get($theme, [2]);

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

Acolor

Bfont

Cbackground

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys that do not exist in the map.

Swapping the keys for color and font.

The keys color and font are used to get the text color and font family from the $theme map.

5fill in blank

hard

Fill all three blanks to correctly access values from the map.

SASS

$config: (width: 100px, height: 200px, display: block);
$w: map-get($config, [1]);
$h: map-get($config, [2]);
$d: map-get($config, [3]);

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

Awidth

Bheight

Cdisplay

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys not present in the map like margin.

Mixing the order of keys.

The keys width, height, and display are used to get their respective values from the $config map.