List values and operations in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a list in Sass?

A list in Sass is a collection of values separated by spaces or commas. It helps group multiple values together for easy use and manipulation.

beginner

How do you create a comma-separated list in Sass?

You create a comma-separated list by writing values separated by commas, like: $colors: red, green, blue;

intermediate

What does the nth() function do in Sass lists?

The nth() function returns the value at a specific position in a list. For example, nth($list, 2) gives the second item.

intermediate

How can you add a value to the end of a Sass list?

Use the append() function. For example, append($list, new-value) adds new-value to the end of $list. By default, it appends with a space separator unless a third argument specifies otherwise.

advanced

What is the difference between space-separated and comma-separated lists in Sass?

Space-separated lists use spaces between values and behave like multiple arguments. Comma-separated lists use commas and keep values grouped distinctly. Some functions treat them differently.

How do you access the third item in a Sass list named $my-list?

A get($my-list, 3)

B nth($my-list, 3)

C $my-list[3]

D item($my-list, 3)

The nth() function is used to get the item at a specific position in a Sass list.

Which function adds a value to the end of a Sass list?

A append()

B insert()

C add()

D push()

The append() function adds a new value to the end of a list in Sass.

What separator does this list use? $list: 10px 20px 30px;

A Space-separated

B Semicolon-separated

C Comma-separated

D Colon-separated

Values separated by spaces form a space-separated list in Sass.

If you want to keep values grouped distinctly, which list separator should you use?

A Space

B Semicolon

C Comma

D Slash

Comma-separated lists keep values grouped distinctly in Sass.

What will length(10px, 20px, 30px) return?

A 0

B 1

C 3

D Error

The length() function requires a list variable, not separate arguments. Passing separate values causes an error.

Explain how to create and access values in a Sass list.

Think about how you group items in a shopping list and how you pick one item by position.

Describe how to add a new value to an existing Sass list and why list separators matter.

Imagine adding a new ingredient to a recipe list and how you separate ingredients.

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