Built-in list functions in SASS - Mini Project: Build & Apply

Using Built-in List Functions in Sass

📖 Scenario: You are creating a simple style guide for a website. You want to manage a list of colors and use Sass built-in list functions to work with these colors efficiently.

🎯 Goal: Build a Sass stylesheet that defines a list of colors, counts how many colors are in the list, adds a new color to the list, and then uses the list to style different sections of a webpage.

📋 What You'll Learn

Create a Sass list variable named $colors with exactly these colors: red, green, blue

Create a variable named $color-count that stores the number of colors in $colors using a built-in list function

Add the color yellow to the $colors list using a built-in list function and store it in a new variable $new-colors

Use the $new-colors list to set background colors for four sections with class names .section-1 to .section-4 respectively

💡 Why This Matters

🌍 Real World

Managing colors and other style values as lists in Sass helps keep your styles organized and easy to update.

💼 Career

Knowing Sass list functions is useful for front-end developers and designers who want to write efficient, maintainable CSS.

1

Create the initial color list

Create a Sass list variable called $colors with these exact colors: red, green, blue

SASS

$colors: red, green, blue;
// Your code here

Hint

Use commas to separate colors in the list.

2

Count the number of colors

Create a variable called $color-count that stores the number of colors in the $colors list using the Sass built-in function length()

SASS

$colors: red, green, blue;
$color-count: length($colors);
// Your code here

Hint

Use length($colors) to get the number of items in the list.

3

Add a new color to the list

Create a new variable called $new-colors by adding the color yellow to the end of the $colors list using the Sass built-in function append()

SASS

$colors: red, green, blue;
$color-count: length($colors);
$new-colors: append($colors, yellow);
// Your code here

Hint

Use append($colors, yellow) to add yellow to the list.

4

Use the color list to style sections

Write CSS rules for classes .section-1, .section-2, .section-3, and .section-4. Use the Sass built-in function nth() with $new-colors to set the background-color property for each section respectively (1 to 4).

SASS

$colors: red, green, blue;
$color-count: length($colors);
$new-colors: append($colors, yellow);

.section-1 {
  background-color: nth($new-colors, 1);
}
.section-2 {
  background-color: nth($new-colors, 2);
}
.section-3 {
  background-color: nth($new-colors, 3);
}
.section-4 {
  background-color: nth($new-colors, 4);
}
// Your code here

Hint

Use nth($new-colors, index) to get each color by position.

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