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

Challenge - 5 Problems

🧠 Conceptual

intermediate

Difference between @for ... through and @for ... to in Sass

What is the main difference between @for $i from 1 through 3 and @for $i from 1 to 3 in Sass?

A Both <code>through</code> and <code>to</code> exclude the last number (3).

B The <code>to</code> keyword includes the last number (3), while <code>through</code> excludes it.

C Both <code>through</code> and <code>to</code> include the last number (3).

D The <code>through</code> keyword includes the last number (3), while <code>to</code> excludes it.

💡 Hint

Think about whether the loop runs up to and including the last number or stops before it.

In Sass, @for $i from 1 through 3 loops with $i values 1, 2, and 3. The through keyword means the loop includes the last number.

On the other hand, @for $i from 1 to 3 loops with $i values 1 and 2 only. The to keyword excludes the last number.

📝 Syntax

intermediate

Output of @for loop with 'to' keyword

What CSS is generated by this Sass code?

@for $i from 1 to 4 {
  .item-#{$i} {
    width: 10px * $i;
  }
}

A

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

B

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

C

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

D Syntax error: missing semicolon after width value

💡 Hint

Remember that to excludes the last number.

The loop runs from 1 up to but not including 4, so it runs for 1, 2, and 3.

Each iteration creates a class with width multiplied by $i.

❓ rendering

advanced

Visual result of @for loop with 'through' keyword

Given this Sass code:

@for $i from 1 through 3 {
  .box-#{$i} {
    height: 5rem * $i;
    background-color: lighten(#0077cc, 10% * $i);
  }
}

What will you see in the browser?

A Three boxes with heights 5rem, 10rem, 15rem and progressively lighter blue backgrounds.

B Two boxes with heights 5rem and 10rem and the same blue background color.

C Three boxes with the same height 5rem but different background colors.

D No boxes appear because of a syntax error.

💡 Hint

Check how many times the loop runs and how the properties change with $i.

The loop runs 3 times (1, 2, 3). Each box has height multiplied by $i and background color lightened by 10% times $i.

This results in three boxes stacked or listed with increasing height and lighter blue shades.

❓ selector

advanced

Selector generated by nested @for loops with 'to' and 'through'

What selectors are generated by this Sass code?

@for $i from 1 to 3 {
  @for $j from 1 through 2 {
    .item-#{$i}-#{$j} {
      content: "#{$i}-#{$j}";
    }
  }
}

A .item-1-1, .item-1-2, .item-2-1, .item-2-2, .item-3-1, .item-3-2

B Syntax error due to nested loops

C .item-1-1, .item-1-2, .item-2-1, .item-2-2

D .item-1-1, .item-2-1, .item-3-1

💡 Hint

Remember the difference in loop ranges for to and through.

The outer loop runs from 1 up to but not including 3 (1, 2).

The inner loop runs from 1 through 2 (1, 2).

So selectors are combinations of these values.

❓ accessibility

expert

Accessibility impact of using @for loops for generating classes

When using Sass @for loops to generate multiple classes for UI elements, what accessibility consideration should you keep in mind?

A Loops in Sass prevent keyboard navigation by default.

B Ensure that generated classes do not rely solely on color for conveying information, to support users with color blindness.

C Using loops automatically adds ARIA labels to all generated elements.

D Generated classes should always use <code>display:none</code> to hide content from screen readers.

💡 Hint

Think about how visual styles affect users with different abilities.

When generating multiple classes with loops, the styles might use colors to differentiate elements.

For accessibility, do not rely only on color to convey meaning. Provide text or other cues.

Options B, C, and D are incorrect because Sass loops do not add ARIA labels automatically, do not affect keyboard navigation, and hiding content with display:none removes it from screen readers, which is not always desired.