Built-in list functions in SASS - 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);
$length: [1]($colors);

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

Alength

Bsize

Ccount

Dlength_of

Attempts:

3 left

💡 Hint

Common Mistakes

Using size() which does not exist in Sass.

Using count() which is not a Sass function.

Using length_of() which is invalid.

The length() function returns the number of items in a list in Sass.

2fill in blank

medium

Complete the code to get the first item of the list.

SASS

$colors: (red, green, blue);
$first-color: [1]($colors);

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

Abegin

Bfirst

Cstart

Dhead

Attempts:

3 left

💡 Hint

Common Mistakes

Using head() which is not a Sass function.

Using start() or begin() which do not exist.

The first() function returns the first item in a list in Sass.

3fill in blank

hard

Fix the error in the code to get the last item of the list.

SASS

$colors: (red, green, blue);
$last-color: [1]($colors);

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

Afinal

Bend

Ctail

Dlast

Attempts:

3 left

💡 Hint

Common Mistakes

Using end() which is not a Sass function.

Using tail() which does not exist in Sass.

The correct function to get the last item in a list in Sass is last().

4fill in blank

hard

Complete the code to get a sublist from the second to the third item.

SASS

$colors: (red, green, blue, yellow);
$sublist: [1]($colors, 2, 3);

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

Asublist

Blist_slice

Cslice

Dsegment

Attempts:

3 left

💡 Hint

Common Mistakes

Using sublist() which is not a Sass function.

Using list_slice() or segment() which do not exist.

The slice() function extracts a part of a list. The start index is 2 and end index is 3 (1-based indexing).

5fill in blank

hard

Fill all three blanks to join two lists into one.

SASS

$list1: (red, green);
$list2: (blue, yellow);
$combined: [1]($list1, [2], [3]);

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

Ajoin

B$list2

Ccomma

D$list1

Attempts:

3 left

💡 Hint

Common Mistakes

Using append() which appends a list as a single nested item.

Using $list1 in the second blank which is the original list.

Using space or other separators instead of comma.

The join() function adds items from one list to another. The second blank is the list to add, and the third blank is the separator comma.

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