sass:list module - Mini Project: Build & Apply

Using the sass:list Module to Manage Colors

📖 Scenario: You are creating a simple color palette for a website. You want to store a list of colors and then pick only the first few colors to use in your design.

🎯 Goal: Build a Sass stylesheet that uses the sass:list module to create a list of colors, set a limit for how many colors to use, extract those colors using the list module, and then apply them as background colors to CSS classes.

📋 What You'll Learn

Create a Sass list variable named $colors with exactly these colors: #ff0000, #00ff00, #0000ff, #ffff00, #00ffff

Create a variable named $max-colors and set it to 3

Use the list.slice() function from the sass:list module to create a new list named $selected-colors that contains only the first $max-colors colors from $colors

Write CSS rules that create classes .color-1, .color-2, and .color-3 with background colors from $selected-colors using a @for loop

💡 Why This Matters

🌍 Real World

Managing color palettes in Sass helps keep website styles consistent and easy to update.

💼 Career

Front-end developers often use Sass list functions to handle design tokens like colors efficiently.

1

Create the initial color list

Create a Sass list variable called $colors with these exact colors in this order: #ff0000, #00ff00, #0000ff, #ffff00, #00ffff

SASS

# Create the $colors list with 5 colors
# Your code here

Hint

Use parentheses to create a list in Sass. Separate colors with commas.

2

Set the maximum number of colors to use

Create a variable called $max-colors and set it to the number 3

SASS

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #00ffff);

# Create $max-colors variable and set it to 3
# Your code here

Hint

Just assign the number 3 to the variable $max-colors.

3

Extract the first colors using sass:list slice

Use the list.slice() function from the sass:list module to create a new list variable called $selected-colors that contains the first $max-colors colors from $colors

SASS

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #00ffff);

$max-colors: 3;

# Create $selected-colors using list.slice() to get first $max-colors colors
# Your code here

Hint

Remember to add @use "sass:list"; at the top to access the list module functions.

4

Create CSS classes with background colors from the selected list

Write a @for loop from 1 through $max-colors that creates CSS classes named .color-1, .color-2, and .color-3. Each class should have a background-color set to the corresponding color from $selected-colors using list.nth()

SASS

@use "sass:list";

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #00ffff);

$max-colors: 3;

$selected-colors: list.slice($colors, 1, $max-colors);

// Use a @for loop to create .color-1, .color-2, .color-3 classes
// Each with background-color from $selected-colors
# Your code here

Hint

Use @for $i from 1 through $max-colors and inside the loop create the classes with .color-#{$i}. Use list.nth() to get the color.