List values and operations in SASS - Mini Project: Build & Apply

Working with Lists in Sass

📖 Scenario: You are creating a simple style sheet for a website. You want to manage a list of colors and perform operations on them to style different parts of the page.

🎯 Goal: Build a Sass stylesheet that defines a list of colors, adds a new color to the list, and uses the list length to set a CSS property.

📋 What You'll Learn

Create a Sass list variable named $colors with the values red, green, and blue.

Create a variable named $new-color and set it to yellow.

Add $new-color to the end of the $colors list using the append() function and store it in a new variable $all-colors.

Create a CSS rule for body that sets a custom property --color-count to the length of $all-colors using the length() function.

💡 Why This Matters

🌍 Real World

Managing colors and other grouped values in Sass helps keep styles consistent and easy to update in real websites.

💼 Career

Understanding Sass lists and operations is important for front-end developers working with modern CSS preprocessors to build scalable and maintainable stylesheets.

1

Create the initial list of colors

Create a Sass list variable called $colors with the exact values red, green, and blue.

SASS

$colors: ();  // Your code here

Hint

Use commas to separate list items in Sass.

2

Add a new color variable

Create a variable called $new-color and set it to yellow.

SASS

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

Hint

Variables in Sass start with a dollar sign $.

3

Append the new color to the list

Use the append() function to add $new-color to the end of $colors and save the result in a variable called $all-colors.

SASS

$colors: red, green, blue;
$new-color: yellow;
// Your code here

Hint

The append() function takes the list and the value to add as arguments.

4

Use the list length in CSS

Create a CSS rule for body that sets the custom property --color-count to the length of $all-colors using the length() function.

SASS

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

body {
  /* Your code here */
}

Hint

Use #{} to insert Sass expressions inside CSS.

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