List values and operations in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a list of colors.

SASS

$colors: ([1]);

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

Ared, blue, green

Bred blue green

C'red', 'blue', 'green'

D[red, blue, green]

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces instead of commas to separate list items.

Using quotes around color names unnecessarily.

Using square brackets instead of parentheses.

The correct way to define a list in Sass is by separating values with commas inside parentheses.

2fill in blank

medium

Complete the code to get the length of the list.

SASS

$length: length([1]);

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

Acolors

Blength

C$colors

D$length

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dollar sign before the variable name.

Passing a string or function name instead of the list variable.

The length() function takes a list variable as input. The list variable here is $colors.

3fill in blank

hard

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

SASS

$first-color: nth([1], 1);

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

Acolors

Bfirst-color

Cnth

D$colors

Attempts:

3 left

💡 Hint

Common Mistakes

Using the list name without the dollar sign.

Using a function name or unrelated variable.

The nth() function requires the list variable with the dollar sign. So $colors is correct.

4fill in blank

hard

Fill both blanks to add a new color to the list.

SASS

$new-colors: append([1], [2]);

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

A$colors

Byellow

Cred

D$new-colors

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string with quotes for the new color.

Using the wrong variable for the list.

The append() function adds a new item to the list. The first blank is the original list $colors, and the second blank is the new color yellow.

5fill in blank

hard

Fill all three blanks to create a list of font sizes and get the last size.

SASS

$font-sizes: ([1], [2], [3]);
$last-size: nth($font-sizes, length($font-sizes));

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

A12px

B14px

C16px

D18px

Attempts:

3 left

💡 Hint

Common Mistakes

Using sizes without units.

Putting sizes in quotes.

Mixing up the order of sizes.

The list $font-sizes is created with three sizes: 18px, 14px, and 16px. The nth() function then gets the last item by using the length of the list.

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