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