List values and operations in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a list of colors.

SASS

$colors: ([1]);

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

Ared, blue, green

Bred blue green

C'red', 'blue', 'green'

D[red, blue, green]

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces instead of commas to separate list items.

Using quotes around color names unnecessarily.

Using square brackets instead of parentheses.

The correct way to define a list in Sass is by separating values with commas inside parentheses.

2fill in blank

medium

Complete the code to get the length of the list.

SASS

$length: length([1]);

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

Acolors

Blength

C$colors

D$length

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dollar sign before the variable name.

Passing a string or function name instead of the list variable.

The length() function takes a list variable as input. The list variable here is $colors.

3fill in blank

hard

Fix the error in the code to get the first item of the list.

SASS

$first-color: nth([1], 1);

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

Acolors

Bfirst-color

Cnth

D$colors

Attempts:

3 left

💡 Hint

Common Mistakes

Using the list name without the dollar sign.

Using a function name or unrelated variable.

The nth() function requires the list variable with the dollar sign. So $colors is correct.

4fill in blank

hard

Fill both blanks to add a new color to the list.

SASS

$new-colors: append([1], [2]);

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

A$colors

Byellow

Cred

D$new-colors

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string with quotes for the new color.

Using the wrong variable for the list.

The append() function adds a new item to the list. The first blank is the original list $colors, and the second blank is the new color yellow.

5fill in blank

hard

Fill all three blanks to create a list of font sizes and get the last size.

SASS

$font-sizes: ([1], [2], [3]);
$last-size: nth($font-sizes, length($font-sizes));

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

A12px

B14px

C16px

D18px

Attempts:

3 left

💡 Hint

Common Mistakes

Using sizes without units.

Putting sizes in quotes.

Mixing up the order of sizes.

The list $font-sizes is created with three sizes: 18px, 14px, and 16px. The nth() function then gets the last item by using the length of the list.