Maps for grouped values in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a map with grouped color values.

SASS

$colors: ("primary": [1]);

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

A("blue", "green", "red") !default

B("blue", "green", "red")

C["blue", "green", "red"]

D"blue, green, red"

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets instead of parentheses for lists.

Putting colors as a plain string instead of a list.

The map value must be a list enclosed in parentheses to group colors.

2fill in blank

medium

Complete the code to access the 'secondary' color group from the map.

SASS

$secondary-colors: map-get($colors, [1]);

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

A"secondary"

B"primary"

Csecondary

Dcolors

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the key string.

Using the wrong key name.

Use the exact key string "secondary" to get that group from the map.

3fill in blank

hard

Fix the error in the map definition by completing the blank.

SASS

$font-sizes: (small: 0.8rem, medium: 1rem, large: [1]);

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

A1.2

B"1.2rem"

Clarge

D1.2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the size value in quotes.

Using a plain number without units.

Font sizes should be numeric values with units, not strings or names.

4fill in blank

hard

Fill both blanks to create a map of grouped font weights and sizes.

SASS

$typography: (weights: [1], sizes: [2]);

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

A(light: 300, regular: 400, bold: 700)

B(small: 0.8rem, medium: 1rem, large: 1.2rem)

C[300, 400, 700]

D[0.8rem, 1rem, 1.2rem]

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets instead of parentheses.

Missing keys in the map values.

Maps use parentheses with key-value pairs for weights and sizes.

5fill in blank

hard

Fill all three blanks to create a nested map for colors with light, main, and dark shades.

SASS

$theme-colors: (primary: (light: [1], main: [2], dark: [3]));

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

A#a3d5ff

B#007bff

C#0056b3

D#333333

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for all shades.

Forgetting the # in hex colors.

Each shade uses a hex color code as a string value in the nested map.