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.