Built-in list functions in SASS - Mini Project: Build & Apply

Using Built-in List Functions in Sass

📖 Scenario: You are creating a simple style guide for a website. You want to manage a list of colors and use Sass built-in list functions to work with these colors efficiently.

🎯 Goal: Build a Sass stylesheet that defines a list of colors, counts how many colors are in the list, adds a new color to the list, and then uses the list to style different sections of a webpage.

📋 What You'll Learn

Create a Sass list variable named $colors with exactly these colors: red, green, blue

Create a variable named $color-count that stores the number of colors in $colors using a built-in list function

Add the color yellow to the $colors list using a built-in list function and store it in a new variable $new-colors

Use the $new-colors list to set background colors for four sections with class names .section-1 to .section-4 respectively

💡 Why This Matters

🌍 Real World

Managing colors and other style values as lists in Sass helps keep your styles organized and easy to update.

💼 Career

Knowing Sass list functions is useful for front-end developers and designers who want to write efficient, maintainable CSS.

1

Create the initial color list

Create a Sass list variable called $colors with these exact colors: red, green, blue

SASS

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

Hint

Use commas to separate colors in the list.

2

Count the number of colors

Create a variable called $color-count that stores the number of colors in the $colors list using the Sass built-in function length()

SASS

$colors: red, green, blue;
$color-count: length($colors);
// Your code here

Hint

Use length($colors) to get the number of items in the list.

3

Add a new color to the list

Create a new variable called $new-colors by adding the color yellow to the end of the $colors list using the Sass built-in function append()

SASS

$colors: red, green, blue;
$color-count: length($colors);
$new-colors: append($colors, yellow);
// Your code here

Hint

Use append($colors, yellow) to add yellow to the list.

4

Use the color list to style sections

Write CSS rules for classes .section-1, .section-2, .section-3, and .section-4. Use the Sass built-in function nth() with $new-colors to set the background-color property for each section respectively (1 to 4).

SASS

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

.section-1 {
  background-color: nth($new-colors, 1);
}
.section-2 {
  background-color: nth($new-colors, 2);
}
.section-3 {
  background-color: nth($new-colors, 3);
}
.section-4 {
  background-color: nth($new-colors, 4);
}
// Your code here

Hint

Use nth($new-colors, index) to get each color by position.