@while loop usage in SASS - Mini Project: Build & Apply

Create a Color Shade Generator with @while Loop in Sass

📖 Scenario: You want to create a set of color shades for a website theme. Instead of writing each shade manually, you will use Sass's @while loop to generate these shades automatically.

🎯 Goal: Build a Sass stylesheet that uses an @while loop to create five different shades of a base color. Each shade will be a darker version of the base color, and each shade will be assigned to a CSS class named .shade-1 through .shade-5.

📋 What You'll Learn

Create a variable $base-color with the value #3498db (a blue color).

Create a variable $shade-count set to 5 to represent how many shades to generate.

Use an @while loop with a counter variable $i starting at 1.

Inside the loop, generate a CSS class named .shade-#{$i}.

Each class should set the background-color to a darker shade of $base-color by 10% * $i using the darken() function.

Increment the counter $i inside the loop until it exceeds $shade-count.

💡 Why This Matters

🌍 Real World

Web designers often need to create color palettes with multiple shades for buttons, backgrounds, and highlights. Using loops in Sass saves time and reduces errors.

💼 Career

Knowing how to use loops and variables in Sass is a valuable skill for front-end developers and UI designers to create scalable and maintainable stylesheets.

1

Set up the base color variable

Create a Sass variable called $base-color and set it to the color #3498db.

SASS

$base-color: #3498db;
# Your code here

Hint

Use $base-color: #3498db; to store the blue color.

2

Create the shade count variable

Add a Sass variable called $shade-count and set it to 5 to represent the number of shades to generate.

SASS

$base-color: #3498db;
$shade-count: 5;
# Your code here

Hint

Use $shade-count: 5; to set how many shades you want.

3

Write the @while loop to generate shade classes

Write an @while loop that uses a counter variable $i starting at 1. The loop should run while $i is less than or equal to $shade-count. Inside the loop, create a CSS class named .shade-#{$i} that sets background-color to darken($base-color, 10% * $i). Increment $i by 1 inside the loop.

SASS

$base-color: #3498db;
$shade-count: 5;

$i: 1;
@while $i <= $shade-count {
  .shade-#{$i} {
    background-color: darken($base-color, 10% * $i);
  }
  $i: $i + 1;
}
# Your code here

Hint

Start with $i: 1;. Use @while $i <= $shade-count to loop. Inside, create .shade-#{$i} with background-color: darken($base-color, 10% * $i);. Increase $i by 1 each time.

4

Complete the Sass file with proper formatting

Ensure the Sass code is properly formatted and ready to compile. The full code should include the $base-color and $shade-count variables, the counter $i initialization, and the @while loop with the shade classes.

SASS

$base-color: #3498db;
$shade-count: 5;

$i: 1;
@while $i <= $shade-count {
  .shade-#{$i} {
    background-color: darken($base-color, 10% * $i);
  }
  $i: $i + 1;
}
# Your code here

Hint

Check that all parts are included and formatted correctly for Sass.