Built-in list functions in SASS

Introduction

Built-in list functions help you work with groups of values easily. They save time and make your code cleaner.

When you want to get the length of a list of colors.

When you need to add a new item to an existing list of sizes.

When you want to check if a value is inside a list of fonts.

When you want to join two lists of margins into one.

When you want to get the first or last item from a list of padding values.

Syntax

SASS

@function list-function-name($list, $optional-arguments) {
  // Use built-in list functions like length(), nth(), append(), join(), index()
}

List functions work with lists written like: (red, green, blue) or red, green, blue.

Use parentheses for clarity, but Sass also understands space or comma separated lists.

Examples

This gets the number of items in the list $colors, which is 3.

SASS

$colors: (red, green, blue);
$length: length($colors);

This gets the first item from the list $sizes, which is 10px.

SASS

$sizes: 10px 20px 30px;
$first-size: nth($sizes, 1);

This adds Verdana to the end of the $fonts list.

SASS

$fonts: (Arial, Helvetica);
$new-fonts: append($fonts, Verdana);

This joins two lists into one: (1, 2, 3, 4).

SASS

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

Sample Program

This Sass code shows how to use built-in list functions to get the length, get an item, add an item, and join lists. The @debug lines print the results in the console.

SASS

@use 'sass:list';

$colors: (red, green, blue);

// Get length of list
$color-count: list.length($colors);

// Get first color
$first-color: list.nth($colors, 1);

// Add a new color
$updated-colors: list.append($colors, purple);

// Join two lists
$more-colors: (yellow, orange);
$all-colors: list.join($updated-colors, $more-colors);

// Output results
@debug 'Number of colors: #{$color-count}';
@debug 'First color: #{$first-color}';
@debug 'Colors after append: #{inspect($updated-colors)}';
@debug 'All colors joined: #{inspect($all-colors)}';

Important Notes

Time complexity: List functions run quickly because lists are simple arrays.

Space complexity: Functions like append() and join() create new lists, so they use extra memory.

Common mistake: Forgetting that list indexes start at 1, not 0.

Use append() to add items, but use join() to combine two lists.

Summary

Built-in list functions make working with groups of values easy and clean.

Remember list indexes start at 1 in Sass.

Use functions like length(), nth(), append(), and join() to manage lists.

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