List values and operations in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass list operation?

Consider the following Sass code:

$list: 10px 20px 30px 40px;
$new-list: nth($list, 3);

What is the value of $new-list?

SASS

$list: 10px 20px 30px 40px;
$new-list: nth($list, 3);

A 40px

B 10px

C 20px

D 30px

💡 Hint

Remember that nth() returns the item at the given position starting from 1.

The nth() function returns the element at the specified index. Here, index 3 corresponds to the third item, which is 30px.

🧠 Conceptual

intermediate

How many items are in this Sass list?

Given the Sass list:

$colors: red, green, blue, yellow;

How many items does $colors contain?

SASS

$colors: red, green, blue, yellow;

A 5

B 1

C 4

D 3

💡 Hint

Count each color separated by commas.

The list contains four colors separated by commas, so its length is 4.

❓ selector

advanced

Which option causes a syntax error in Sass list usage?

Which of the following Sass list declarations will cause a syntax error?

A $list: 10px; 20px; 30px;

B $list: (10px 20px 30px);

C $list: 10px 20px 30px;

D $list: 10px, 20px, 30px;

💡 Hint

Check how items are separated in Sass lists.

Option A uses semicolons to separate items, which is invalid syntax for Sass lists. Lists use spaces or commas.

❓ layout

advanced

What is the output of this Sass list join operation?

Given:

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

What is the value of $joined?

SASS

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

A 1 2 3,4 5 6

B 1,2,3,4,5,6

C 1,2,3 4,5,6

D 1 2 3 4 5 6

💡 Hint

The join() function combines lists with a separator you specify.

Using comma as separator joins the two lists with a comma between them, preserving spaces inside each list.

❓ accessibility

expert

Which Sass list operation helps improve accessibility by managing color contrast pairs?

You have a list of background colors and a list of text colors. Which Sass list operation is best to pair each background with a text color for accessibility checks?

A append() to add text colors to background colors list

B zip() to combine background and text color lists into pairs

C length() to count how many colors are in each list

D nth() to select the first color from each list separately

💡 Hint

Think about pairing items from two lists into one list of pairs.

The zip() function combines two lists into a list of pairs, which is useful for pairing background and text colors for contrast checks.

Practice

1. What does a list in Sass represent?

easy

A. A type of selector

B. A single color value

C. A CSS property name

D. A group of multiple values stored together

Solution

1. Step 1: Understand the concept of lists in Sass

   Lists in Sass are used to group multiple values together for easy reuse.

2. Step 2: Identify the correct description

   'A group of multiple values stored together' correctly describes a Sass list.

3. Final Answer:

   A group of multiple values stored together -> Option D

4. Quick Check:

   List = group of values [OK]

Hint: Lists hold multiple values separated by commas or spaces [OK]

Common Mistakes:

• Thinking a list is a single value
• Confusing lists with CSS properties
• Assuming lists are selectors

2. Which of the following is the correct syntax for a list with three colors in Sass?

easy

A. $colors: red, green, blue;

B. $colors: (red, green, blue);

C. $colors: red, green blue;

D. $colors: [red, green, blue];

Solution

1. Step 1: Recall Sass list syntax

   Sass lists use commas or spaces to separate values without parentheses or brackets.

2. Step 2: Identify the correct syntax

   $colors: red, green, blue; uses commas correctly without extra characters, which is valid Sass list syntax.

3. Final Answer:

   $colors: red, green, blue; -> Option A

4. Quick Check:

   List syntax uses commas or spaces [OK]

Hint: Use commas or spaces without brackets for lists [OK]

Common Mistakes:

• Using parentheses like tuples
• Using square brackets like arrays
• Missing commas when needed

3. Given the Sass list $sizes: 10px 20px 30px;, what does nth($sizes, 2) return?

medium

A. 10px

B. 30px

C. 20px

D. Error

Solution

1. Step 1: Understand nth() function

   nth() returns the item at the given position (1-based) in the list.

2. Step 2: Apply nth() to the list

   The list is 10px (1), 20px (2), 30px (3). nth($sizes, 2) returns the second item: 20px.

3. Final Answer:

   20px -> Option C

4. Quick Check:

   nth() returns item at position [OK]

Hint: nth(list, n) gets the nth item starting at 1 [OK]

Common Mistakes:

• Using zero-based index instead of one-based
• Confusing nth() with length()
• Expecting an error for valid index

4. What is wrong with this Sass code?

$list: 1, 2, 3;

width: nth($list 2);

medium

A. Missing comma between $list and 2 in nth()

B. nth() cannot be used with numbers

C. List must use spaces, not commas

D. nth() requires three arguments

Solution

1. Step 1: Check nth() function syntax

   nth() requires two arguments separated by a comma: the list and the index.

2. Step 2: Identify the syntax error

   The code uses nth($list 2) missing a comma between $list and 2, causing a syntax error.

3. Final Answer:

   Missing comma between $list and 2 in nth() -> Option A

4. Quick Check:

   nth() needs comma-separated arguments [OK]

Hint: Separate nth() arguments with a comma [OK]

Common Mistakes:

• Omitting comma between arguments
• Using wrong number of arguments
• Confusing nth() with other functions

5. How can you get the number of items in the Sass list $fonts: 'Arial', 'Helvetica', 'Sans-serif';?

hard

A. Using nth($fonts)

B. Using length($fonts)

C. Using size($fonts)

D. Using count($fonts)

Solution

1. Step 1: Recall function to get list length

   Sass provides the length() function to return the number of items in a list.

2. Step 2: Match the function to the list

   Applying length($fonts) returns 3, the number of font names in the list.

3. Final Answer:

   Using length($fonts) -> Option B

4. Quick Check:

   length() returns list size [OK]

Hint: Use length() to count list items [OK]

Common Mistakes:

• Using count() which is not a Sass function
• Using size() which is invalid
• Using nth() without index