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

Need a 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

Need a 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

Need a 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 */
}

Need a hint?

Use #{} to insert Sass expressions inside CSS.