@while loop usage in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS code using @while loop?

Consider the following SASS code. What CSS does it produce?

SASS

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

A

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

B

.item-0 { width: 0rem; }
.item-1 { width: 10rem; }
.item-2 { width: 20rem; }
.item-3 { width: 30rem; }

C

.item-1 { width: 10rem; }
.item-2 { width: 20rem; }

D SyntaxError: Undefined variable $i

💡 Hint

Check if the variable $i is initialized before the @while loop.

In SASS, variables must be initialized before use. Here, $i is used without initialization, causing an error.

❓ rendering

intermediate

What CSS is generated by this correct @while loop in SASS?

Given this SASS code, what CSS does it output?

SASS

$i: 1;
@while $i <= 2 {
  .box-#{$i} {
    height: 5rem * $i;
  }
  $i: $i + 1;
}

A SyntaxError: Missing semicolon

B

.box-1 { height: 5rem; }
.box-2 { height: 10rem; }

C

.box-1 { height: 10rem; }
.box-2 { height: 20rem; }

D

.box-1 { height: 5rem; }
.box-2 { height: 5rem; }

💡 Hint

Remember the loop runs while $i is less or equal to 2, and height multiplies 5rem by $i.

The loop runs for $i = 1 and 2, generating .box-1 with height 5rem and .box-2 with height 10rem.

❓ selector

advanced

Which option correctly generates selectors .nav-1, .nav-2, .nav-3 using @while loop?

Choose the SASS code that produces CSS selectors .nav-1, .nav-2, and .nav-3.

A

$i: 1;
@while $i <= 3 {
  .nav-#{$i} {
    color: blue;
  }
  $i: $i + 1;
}

B

@while $i <= 3 {
  .nav-#{$i} {
    color: blue;
  }
  $i: $i + 1;
}
$i: 1;

C

}
;1 + i$ :i$  
}  
;eulb :roloc    
{ }i${#-van.  
{ 3 =< i$ elihw@
;1 :i$

D

$i: 1;
@while $i < 3 {
  .nav-#{$i} {
    color: blue;
  }
  $i: $i + 1;
}

💡 Hint

Initialization of $i must happen before the loop and the condition must include 3.

Option A initializes $i before the loop and loops while $i <= 3, producing .nav-1, .nav-2, .nav-3 selectors.

❓ layout

advanced

What visual layout results from this SASS @while loop generating grid columns?

This SASS code creates grid columns with widths increasing by 5rem. What is the final layout?

SASS

$i: 1;
.container {
  display: grid;
  grid-template-columns: repeat(3, auto);
}
@while $i <= 3 {
  .col-#{$i} {
    width: 5rem * $i;
    background: lightgray;
  }
  $i: $i + 1;
}

A Three columns with widths 15rem, 10rem, and 5rem, each with light gray background.

B Three columns all with width 5rem and light gray background.

C Three columns with widths 5rem, 10rem, and 15rem, each with light gray background.

D No columns visible due to missing display property.

💡 Hint

Widths multiply 5rem by the column number, increasing size left to right.

The loop creates .col-1, .col-2, .col-3 with widths 5rem, 10rem, 15rem respectively, visible as grid columns.

❓ accessibility

expert

How to use @while loop in SASS to generate accessible focus styles for buttons?

You want to create focus outlines with increasing thickness for buttons .btn-1 to .btn-4 using @while loop. Which SASS code correctly does this and supports accessibility?

A

$i: 1;
@while $i <= 4 {
  .btn-#{$i}:focus {
    outline: 0.1rem solid blue;
    outline-offset: 0.2rem * $i;
  }
  $i: $i + 1;
}

B

$i: 1;
@while $i <= 4 {
  .btn-#{$i}:focus {
    outline: 0.1rem solid blue;
    outline-offset: 0.2rem;
  }
  $i: $i + 1;
}

C

$i: 1;
@while $i <= 4 {
  .btn-#{$i}:focus {
    outline: 0.1rem * $i solid blue;
    outline-offset: 0.2rem * $i;
  }
  $i: $i + 1;
}

D

$i: 1;
@while $i <= 4 {
  .btn-#{$i}:focus {
    outline: 0.1rem solid blue;
    outline-offset: 0.2rem * $i;
  }
}

💡 Hint

Multiply outline-offset by $i for increasing offset; outline thickness stays constant.

Option A correctly multiplies outline-offset by $i for increasing spacing, uses valid outline syntax, and increments $i properly.

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