@for loop (through vs to) in SASS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create 4 boxes with different background colors using a @for loop that includes the last number.

SASS

@for $i from 1 [1] 4 {
  .box-#{$i} {
    background-color: lighten(blue, 10% * $i);
  }
}

Drag options to blanks, or click blank then click option'

Ato

Bthrough

Cuntil

Dupto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' will stop before the last number, so only 3 boxes are created instead of 4.

Using 'through' includes the last number in the loop, so it runs from 1 to 4 including 4.

2fill in blank

medium

Complete the code to create 4 buttons with increasing padding using a @for loop that excludes the last number.

SASS

@for $j from 1 [1] 5 {
  .btn-#{$j} {
    padding: $j * 0.5rem;
  }
}

Drag options to blanks, or click blank then click option'

Ato

Bthrough

Cupto

Duntil

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'through' will include 5, creating an extra button.

Using 'to' excludes the last number, so the loop runs from 1 to 4.

3fill in blank

hard

Fix the error in the loop keyword to correctly generate 6 list items.

SASS

ul {
  @for $k from 1 [1] 6 {
    li:nth-child(#{$k}) {
      content: "Item #{$k}";
    }
  }
}

Drag options to blanks, or click blank then click option'

Ato

Buntil

Cupto

Dthrough

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' causes the loop to stop before 6, missing the last item.

'through' includes the last number 6, so the loop runs from 1 to 6.

4fill in blank

hard

Fill both blanks to create 4 colored squares with increasing size using a @for loop that excludes the last number.

SASS

@for $n from 1 [1] 5 {
  .square-#{$n} {
    width: $n * 2rem;
    height: $n * 2rem;
    background-color: adjust-hue(red, $n * 20deg);
  }
  @if $n [2] 3 {
    border: 1px solid black;
  }
}

Drag options to blanks, or click blank then click option'

Ato

Bthrough

C<=

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'through' includes 5, creating an extra square.

Using '<=' applies border to $n=3, which is not intended.

The loop uses 'to' to exclude 5, so it runs 1 to 4. The condition uses '<' to apply border only when $n is less than 3.

5fill in blank

hard

Fill all three blanks to create a list of 6 items with different font sizes and colors using a @for loop that includes the last number.

SASS

ol {
  @for $m from 1 [1] 6 {
    li:nth-child(#{$m}) {
      font-size: $m * 0.8rem;
      color: adjust-hue(blue, $m * [2]deg);
      margin-bottom: [3]rem;
    }
  }
}

Drag options to blanks, or click blank then click option'

Ato

Bthrough

C15

D1.2

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' excludes the last item.

Using too large or too small hue values causes poor color changes.

The loop uses 'through' to include 6, so it runs 1 to 6. The hue adjustment uses 15 degrees per step, and margin-bottom is set to 1.2 rem.