sass:list module - 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;
$list-length: list.[1]($colors);

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

Ajoin

Blength

Cindex

Dappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'append' instead of 'length' which adds items rather than counting.

Using 'index' which finds position of an item, not list length.

The length function returns how many items are in a list.

2fill in blank

medium

Complete the code to add an item to the end of the list.

SASS

$fruits: apple, banana;
$new-list: list.[1]($fruits, orange);

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

Alength

Bremove

Cappend

Dset-nth

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'length' which counts items instead of adding.

Using 'remove' which deletes items.

The append function adds a new item to the end of a list.

3fill in blank

hard

Fix the error in the code to get the second item from the list.

SASS

$shapes: circle, square, triangle;
$second-item: list.[1]($shapes, 2);

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

Anth

Bindex

Cappend

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'index' which returns the position of an item, not the item itself.

Using 'append' which adds items instead of retrieving.

The nth function returns the item at a specific position in the list.

4fill in blank

hard

Fill both blanks to remove the first item from the list and get the new list.

SASS

$numbers: 1, 2, 3, 4;
$new-numbers: list.[1]($numbers, [2]);

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

Aremove

Bappend

C1

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'append' which adds items instead of removing.

Using 'length' which counts items, not removes.

The remove function deletes the first occurrence of a given value from the list. Here, value 1 removes the first item.

5fill in blank

hard

Fill all three blanks to create a new list with the second item replaced by 'yellow'.

SASS

$colors: red, green, blue;
$new-colors: list.[1]($colors, [2], [3]);

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

Aset-nth

B2

Cyellow

Dappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'append' which adds items instead of replacing.

Using wrong position number.

The set-nth function replaces the item at a given position. Here, it replaces the second item with 'yellow'.