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'.

Practice

1. What does the Sass function length() do when used on a list?

easy

A. Returns the number of items in the list

B. Returns the first item of the list

C. Adds a new item to the list

D. Joins two lists into one

Solution

1. Step 1: Understand the purpose of length()

   The length() function counts how many items are inside a list.

2. Step 2: Compare with other functions

   Functions like nth() get an item, append() adds items, and join() combines lists, so they do different things.

3. Final Answer:

   Returns the number of items in the list -> Option A

4. Quick Check:

   length() = count items [OK]

Hint: Remember length() counts items, not returns values [OK]

Common Mistakes:

• Confusing length() with nth()
• Thinking length() adds items
• Mixing length() with join()

2. Which of the following is the correct syntax to get the 3rd item from a list named $colors in Sass?

easy

A. get($colors, 3)

B. item($colors, 3)

C. nth($colors, 3)

D. $colors[3]

Solution

1. Step 1: Recall the function to access list items

   In Sass, nth() is used to get the item at a specific position in a list.

2. Step 2: Check syntax correctness

   The syntax is nth($list, index). Other options like get() or bracket notation are invalid in Sass.

3. Final Answer:

   nth($colors, 3) -> Option C

4. Quick Check:

   nth() = get item by position [OK]

Hint: Use nth(list, index) to get list items [OK]

Common Mistakes:

• Using bracket notation like arrays
• Using non-existent functions like get()
• Mixing up argument order

3. What will be the output of this Sass code?

$list1: 10px 20px 30px;
$list2: 40px 50px;
$result: join($list1, $list2);

What is the value of $result?

medium

A. 10px 20px 30px, 40px 50px

B. 40px 50px 10px 20px 30px

C. 10px 20px 30px 40px 50px

D. Error: join() requires three arguments

Solution

1. Step 1: Understand join() function behavior

   The join() function combines two lists into one list separated by a comma by default.

2. Step 2: Apply join() to given lists

   Joining $list1 and $list2 results in a list: 10px 20px 30px, 40px 50px (comma-separated).

3. Final Answer:

   10px 20px 30px, 40px 50px -> Option A

4. Quick Check:

   join() merges lists with comma separator by default [OK]

Hint: join() sticks lists together with comma separator by default [OK]

Common Mistakes:

• Thinking join() concatenates without separator
• Reversing list order
• Assuming join() needs three arguments

4. Identify the error in this Sass code snippet:

$my-list: 1 2 3;
$new-list: append($my-list, 4, comma);

medium

A. append() cannot add numbers to lists

B. The append() function requires the separator to be 'space' or 'comma' as a string, not a bare word

C. The list $my-list must be declared with parentheses

D. append() needs three arguments but only two are given

Solution

1. Step 1: Check append() function syntax

   The third argument for append() must be a string: either 'space' or 'comma'.

2. Step 2: Identify the error in the code

   The code uses comma without quotes, which is invalid syntax in Sass.

3. Final Answer:

   The append() function requires the separator to be 'space' or 'comma' as a string, not a bare word -> Option B

4. Quick Check:

   Separator must be a quoted string [OK]

Hint: Always quote 'space' or 'comma' in append() separator [OK]

Common Mistakes:

• Forgetting quotes around separator
• Thinking append() only takes two arguments
• Assuming lists need parentheses

5. Given two lists:

$listA: red green blue;
$listB: yellow orange;

You want to create a new list that contains all items from $listA followed by $listB, separated by spaces, and then add black at the end. Which Sass code correctly does this?

hard

A. $combined: join($listA, $listB, 'space') append(black);

B. $combined: join(append($listA, black, 'space'), $listB, 'comma');

C. $combined: append($listA, join($listB, black, 'space'), 'space');

D. $combined: append(join($listA, $listB, 'space'), black, 'space');

Solution

1. Step 1: Join $listA and $listB with space separator

   Use join($listA, $listB, 'space') to combine both lists with spaces.

2. Step 2: Append 'black' to the joined list with space separator

   Use append(..., black, 'space') to add 'black' at the end, keeping space separation.

3. Step 3: Verify other options

   $combined: join(append($listA, black, 'space'), $listB, 'comma'); uses comma separator incorrectly; $combined: append($listA, join($listB, black, 'space'), 'space'); nests join inside append wrongly; $combined: join($listA, $listB, 'space') append(black); syntax is invalid.

4. Final Answer:

   $combined: append(join($listA, $listB, 'space'), black, 'space'); -> Option D

5. Quick Check:

   join() then append() with 'space' separator [OK]

Hint: Join lists first, then append new item with same separator [OK]

Common Mistakes:

• Mixing comma and space separators
• Appending before joining lists
• Incorrect function chaining syntax