Built-in list functions in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the length of the list.

SASS

$colors: (red, green, blue);
$length: [1]($colors);

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

Alength

Bsize

Ccount

Dlength_of

Attempts:

3 left

💡 Hint

Common Mistakes

Using size() which does not exist in Sass.

Using count() which is not a Sass function.

Using length_of() which is invalid.

The length() function returns the number of items in a list in Sass.

2fill in blank

medium

Complete the code to get the first item of the list.

SASS

$colors: (red, green, blue);
$first-color: [1]($colors);

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

Abegin

Bfirst

Cstart

Dhead

Attempts:

3 left

💡 Hint

Common Mistakes

Using head() which is not a Sass function.

Using start() or begin() which do not exist.

The first() function returns the first item in a list in Sass.

3fill in blank

hard

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

SASS

$colors: (red, green, blue);
$last-color: [1]($colors);

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

Afinal

Bend

Ctail

Dlast

Attempts:

3 left

💡 Hint

Common Mistakes

Using end() which is not a Sass function.

Using tail() which does not exist in Sass.

The correct function to get the last item in a list in Sass is last().

4fill in blank

hard

Complete the code to get a sublist from the second to the third item.

SASS

$colors: (red, green, blue, yellow);
$sublist: [1]($colors, 2, 3);

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

Asublist

Blist_slice

Cslice

Dsegment

Attempts:

3 left

💡 Hint

Common Mistakes

Using sublist() which is not a Sass function.

Using list_slice() or segment() which do not exist.

The slice() function extracts a part of a list. The start index is 2 and end index is 3 (1-based indexing).

5fill in blank

hard

Fill all three blanks to join two lists into one.

SASS

$list1: (red, green);
$list2: (blue, yellow);
$combined: [1]($list1, [2], [3]);

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

Ajoin

B$list2

Ccomma

D$list1

Attempts:

3 left

💡 Hint

Common Mistakes

Using append() which appends a list as a single nested item.

Using $list1 in the second blank which is the original list.

Using space or other separators instead of comma.

The join() function adds items from one list to another. The second blank is the list to add, and the third blank is the separator comma.