List values and operations in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass list operation?

Consider the following Sass code:

$list: 10px 20px 30px 40px;
$new-list: nth($list, 3);

What is the value of $new-list?

SASS

$list: 10px 20px 30px 40px;
$new-list: nth($list, 3);

A 40px

B 10px

C 20px

D 30px

💡 Hint

Remember that nth() returns the item at the given position starting from 1.

The nth() function returns the element at the specified index. Here, index 3 corresponds to the third item, which is 30px.

🧠 Conceptual

intermediate

How many items are in this Sass list?

Given the Sass list:

$colors: red, green, blue, yellow;

How many items does $colors contain?

SASS

$colors: red, green, blue, yellow;

A 5

B 1

C 4

D 3

💡 Hint

Count each color separated by commas.

The list contains four colors separated by commas, so its length is 4.

❓ selector

advanced

Which option causes a syntax error in Sass list usage?

Which of the following Sass list declarations will cause a syntax error?

A $list: 10px; 20px; 30px;

B $list: (10px 20px 30px);

C $list: 10px 20px 30px;

D $list: 10px, 20px, 30px;

💡 Hint

Check how items are separated in Sass lists.

Option A uses semicolons to separate items, which is invalid syntax for Sass lists. Lists use spaces or commas.

❓ layout

advanced

What is the output of this Sass list join operation?

Given:

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

What is the value of $joined?

SASS

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

A 1 2 3,4 5 6

B 1,2,3,4,5,6

C 1,2,3 4,5,6

D 1 2 3 4 5 6

💡 Hint

The join() function combines lists with a separator you specify.

Using comma as separator joins the two lists with a comma between them, preserving spaces inside each list.

❓ accessibility

expert

Which Sass list operation helps improve accessibility by managing color contrast pairs?

You have a list of background colors and a list of text colors. Which Sass list operation is best to pair each background with a text color for accessibility checks?

A append() to add text colors to background colors list

B zip() to combine background and text color lists into pairs

C length() to count how many colors are in each list

D nth() to select the first color from each list separately

💡 Hint

Think about pairing items from two lists into one list of pairs.

The zip() function combines two lists into a list of pairs, which is useful for pairing background and text colors for contrast checks.