@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.

Practice

1. What does the @while loop do in Sass?

easy

A. Stops styles from being applied

B. Runs styles only once

C. Creates a list of styles without repeating

D. Repeats styles while a condition is true

Solution

1. Step 1: Understand the purpose of @while loop

   The @while loop repeats code as long as a condition remains true.

2. Step 2: Compare options with the loop behavior

   Only Repeats styles while a condition is true correctly describes repeating styles while a condition is true.

3. Final Answer:

   Repeats styles while a condition is true -> Option D

4. Quick Check:

   @while loops repeat while true [OK]

Hint: Remember: @while repeats until condition is false [OK]

Common Mistakes:

• Thinking it runs only once
• Confusing with static style blocks
• Believing it stops styles immediately

2. Which of the following is the correct syntax for a @while loop in Sass?

easy

A. @while $i < 5 { .box-#{$i} { width: 10px * $i; } }

B. @while ($i < 5) .box-#{$i} { width: 10px * $i; }

C. @while $i < 5: .box-#{$i} { width: 10px * $i; }

D. @while $i <= 5; { .box-#{$i} { width: 10px * $i; } }

Solution

1. Step 1: Check the correct @while syntax

   The correct syntax uses @while condition { ... } without parentheses or semicolons.

2. Step 2: Identify the option matching this syntax

   @while $i < 5 { .box-#{$i} { width: 10px * $i; } } uses @while $i < 5 { ... } which is correct Sass syntax.

3. Final Answer:

   @while $i < 5 { .box-#{$i} { width: 10px * $i; } } -> Option A

4. Quick Check:

   Correct @while syntax uses braces, no parentheses [OK]

Hint: Use braces {} after @while, no parentheses needed [OK]

Common Mistakes:

• Adding parentheses around condition
• Using semicolons after condition
• Missing braces for loop body

3. What will be the output CSS of this Sass code?

$i: 1;
@while $i <= 3 {
  .item-#{$i} {
    width: 10px * $i;
  }
  $i: $i + 1;
}

medium

A. Syntax error due to missing semicolon

B. .item-1 { width: 1; } .item-2 { width: 2; } .item-3 { width: 3; }

C. .item-1 { width: 10px; } .item-2 { width: 20px; } .item-3 { width: 30px; }

D. No output because $i is not incremented

Solution

1. Step 1: Understand the loop iterations

   The loop runs while $i is 1, 2, and 3, incrementing $i each time.

2. Step 2: Calculate the width for each iteration

   Widths are 10px * 1 = 10px, 10px * 2 = 20px, 10px * 3 = 30px, generating three classes.

3. Final Answer:

   .item-1 { width: 10px; } .item-2 { width: 20px; } .item-3 { width: 30px; } -> Option C

4. Quick Check:

   Loop runs 3 times, width multiplies by $i [OK]

Hint: Check loop count and multiply values carefully [OK]

Common Mistakes:

• Forgetting to increment $i
• Confusing units in multiplication
• Assuming syntax error without checking

4. Identify the error in this Sass @while loop:

$i: 1;
@while $i < 4 {
  .box-#{$i} {
    height: 20px * $i;
  }
}

medium

A. Missing increment of $i inside the loop

B. Incorrect loop condition syntax

C. Using multiplication without units

D. Missing braces around loop body

Solution

1. Step 1: Check loop variable update

   The variable $i is never increased inside the loop, causing an infinite loop.

2. Step 2: Confirm other syntax parts

   Loop condition and braces are correct; multiplication with units is valid in Sass.

3. Final Answer:

   Missing increment of $i inside the loop -> Option A

4. Quick Check:

   Loop variable must change to stop loop [OK]

Hint: Always update loop variable inside @while [OK]

Common Mistakes:

• Forgetting to increment loop variable
• Assuming syntax error instead of logic error
• Confusing multiplication units

5. You want to create 4 button styles with increasing padding using @while. Which code correctly achieves this?

$count: 1;
@while $count <= 4 {
  .btn-#{$count} {
    padding: 5px * $count;
  }
  $count: $count + 1;
}

hard

A. Creates only one button style because $count is not incremented

B. Correctly creates .btn-1 to .btn-4 with padding 5px, 10px, 15px, 20px

C. Syntax error due to missing parentheses in condition

D. Creates buttons but padding stays constant at 5px

Solution

1. Step 1: Analyze loop condition and increment

   The loop runs while $count is 1 to 4, incrementing $count each time.

2. Step 2: Check padding calculation and class names

   Each button gets padding 5px times $count, producing 5px, 10px, 15px, and 20px for .btn-1 to .btn-4.

3. Final Answer:

   Correctly creates .btn-1 to .btn-4 with padding 5px, 10px, 15px, 20px -> Option B

4. Quick Check:

   Loop with increment and multiplication works as expected [OK]

Hint: Increment loop variable and multiply padding inside loop [OK]

Common Mistakes:

• Not incrementing loop variable
• Using parentheses incorrectly in Sass @while
• Forgetting to multiply padding by loop variable