sass:list module - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code using list.nth?

Consider the following Sass code snippet:

$colors: red, green, blue, yellow;
$second-color: list.nth($colors, 2);
.result {
  color: $second-color;
}

What color will be applied to the .result class?

SASS

$colors: red, green, blue, yellow;
$second-color: list.nth($colors, 2);
.result {
  color: $second-color;
}

A yellow

B blue

C red

D green

💡 Hint

Remember that list.nth uses 1-based indexing in Sass lists.

The list $colors has items: red (1), green (2), blue (3), yellow (4). list.nth($colors, 2) returns the second item, which is green.

🧠 Conceptual

intermediate

How many items does this Sass list contain?

Given the Sass list:

$my-list: 10px 20px 30px 40px;

What is the result of list.length($my-list)?

SASS

$my-list: 10px 20px 30px 40px;
$length: list.length($my-list);
.result {
  width: $length * 1rem;
}

A 4

B 1

C 0

D 5

💡 Hint

Count the number of space-separated items in the list.

The list has four items: 10px, 20px, 30px, and 40px. So list.length returns 4.

❓ selector

advanced

Which option correctly appends an item to a Sass list?

You want to add the value purple to the end of the list $colors: red, green, blue; using the Sass list module.
Which option produces the correct new list?

SASS

$colors: red, green, blue;
$new-colors: /* your code here */;
.result {
  content: inspect($new-colors);
}

A list.append($colors, purple)

B list.push($colors, purple)

C list.insert($colors, purple)

D list.add($colors, purple)

💡 Hint

Check the official Sass list module function names for adding items.

The correct function to add an item to the end of a list is list.append(). list.push(), list.add(), and list.insert() do not exist or have different signatures.

❓ layout

advanced

What is the visual result of this Sass code using list.join?

Given these Sass variables:

$list1: 1rem 2rem 3rem;
$list2: 4rem 5rem;
$joined: list.join($list1, $list2, comma);
.box {
  margin: $joined;
}

What margin values will the .box class have in the compiled CSS?

SASS

$list1: 1rem 2rem 3rem;
$list2: 4rem 5rem;
$joined: list.join($list1, $list2, comma);
.box {
  margin: $joined;
}

A margin: 1rem 2rem 3rem 4rem 5rem;

B margin: 1rem 2rem 3rem, 4rem 5rem;

C margin: 1rem, 2rem, 3rem, 4rem, 5rem;

D margin: 1rem, 2rem, 3rem 4rem, 5rem;

💡 Hint

The third argument to list.join controls the separator between lists.

list.join with the separator 'comma' joins the two lists with commas between all items, so the margin property will have comma-separated values.

❓ accessibility

expert

Which Sass list operation helps improve accessibility by managing focus order?

You have a list of focusable elements in Sass representing tab order:

$focus-order: header, main, footer;

You want to insert a new element nav between header and main to improve keyboard navigation.
Which Sass list module function correctly inserts nav at position 2?

SASS

$focus-order: header, main, footer;
$new-focus-order: /* your code here */;

A list.prepend($focus-order, nav)

B list.insert($focus-order, nav, 2)

C list.append($focus-order, nav)

D list.nth($focus-order, 2)

💡 Hint

Think about how to add an item at a specific position in a list.

list.insert allows inserting an item at a specific index. Here, inserting 'nav' at position 2 places it between 'header' and 'main'. list.append adds at the end, list.prepend at the start, and list.nth only retrieves an item.