Built-in list functions in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the length() function in Sass lists

What is the output of the following Sass code snippet?

$colors: red, blue, green, yellow;
$len: length($colors);
@debug $len;

SASS

$colors: red, blue, green, yellow;
$len: length($colors);
@debug $len;

A 3

B 4

C 1

D Error: length() only works on strings

💡 Hint

Think about how many items are in the list $colors.

The length() function returns the number of items in a list. Here, $colors has 4 items, so the output is 4.

📝 Syntax

intermediate

Using nth() to access list elements

What is the value of $second-color after running this Sass code?

$colors: orange, purple, teal;
$second-color: nth($colors, 2);
@debug $second-color;

SASS

$colors: orange, purple, teal;
$second-color: nth($colors, 2);
@debug $second-color;

A purple

B orange

C teal

D Error: nth() index out of range

💡 Hint

Remember that list indexes in Sass start at 1.

The nth() function returns the item at the given position. Position 2 in $colors is 'purple'.

❓ selector

advanced

What does index() return when the item is not found?

Consider this Sass code:

$shapes: circle, square, triangle;
$pos: index($shapes, ellipse);
@debug $pos;

What will be the output of @debug $pos;?

SASS

$shapes: circle, square, triangle;
$pos: index($shapes, ellipse);
@debug $pos;

A false

B 0

C null

D Error: item not found

💡 Hint

Check what index() returns if the item is missing.

The index() function returns null if the item is not found in the list.

❓ layout

advanced

Combining join() with different separators

What is the output of this Sass code?

$list1: 1 2 3;
$list2: 4 5 6;
$joined: join($list1, $list2, comma);
@debug $joined;

SASS

$list1: 1 2 3;
$list2: 4 5 6;
$joined: join($list1, $list2, comma);
@debug $joined;

A 1, 2, 3, 4, 5, 6

B 1 2 3 4 5 6

C Error: join() requires space or comma separator only

D 1, 2, 3 4, 5, 6

💡 Hint

The third argument sets the separator between the two lists.

Using comma as separator joins the two lists with commas between all items.

❓ accessibility

expert

Using append() with separator and its effect on list type

Given this Sass code:

$base-list: a, b, c;
$new-list: append($base-list, d, space);
@debug $new-list;

What will be the output of @debug $new-list;?

SASS

$base-list: a, b, c;
$new-list: append($base-list, d, space);
@debug $new-list;

A Error: append() separator must match list separator

B a, b, c d

C a, b, c, d

D a b c d

💡 Hint

Appending with space changes the list separator.

Appending with space separator converts the list to space-separated, so the output is 'a b c d'.