@each loop over lists in SASS - Mini Project: Build & Apply

@each Loop Over Lists in Sass

📖 Scenario: You are creating a simple style for a website that highlights different sections with distinct background colors. You want to use Sass to loop over a list of colors and apply each color to a different section.

🎯 Goal: Build a Sass stylesheet that uses an @each loop to assign background colors from a list to multiple sections with classes .section-1, .section-2, and .section-3.

📋 What You'll Learn

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

Create a variable $section-count set to 3

Use an @each loop with variables $color and $index to loop over $colors

Inside the loop, style the class .section-#{$index} with the background color set to $color

💡 Why This Matters

🌍 Real World

Using loops in Sass helps you write less repetitive CSS and easily manage styles for multiple elements with similar patterns.

💼 Career

Front-end developers often use Sass loops to create scalable and maintainable stylesheets for websites and applications.

1

Create the color list

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

SASS

# Create a list variable $colors with red, green, blue
# Your code here

Hint

Use parentheses or commas to create a list in Sass. For example: $list: item1, item2;

2

Add the section count variable

Create a variable called $section-count and set it to 3

SASS

$colors: (red, green, blue);

// Create a variable $section-count and set it to 3
# Your code here

Hint

Use $variable-name: value; to create variables in Sass.

3

Write the @each loop with index

Write an @each loop using variables $color and $index to loop over $colors with index starting at 1

SASS

$colors: (red, green, blue);
$section-count: 3;

// Write an @each loop with $color and $index over $colors
# Your code here

Hint

Use @each $item, $index in $list { ... } to loop with index in Sass.

4

Complete the style for sections

Ensure the loop styles the classes .section-1, .section-2, and .section-3 with their respective background colors from $colors

SASS

$colors: (red, green, blue);
$section-count: 3;

@each $color, $index in $colors {
  .section-#{$index} {
    // Add background color property here
    # Your code here
  }
}

Hint

Inside the loop, set background-color to $color for each section.