@for loop (through vs to) in SASS - Hands-On Comparison

@for loop (through vs to) in Sass

📖 Scenario: You are creating a simple color palette for a website. You want to generate CSS classes for background colors using Sass loops.

🎯 Goal: Build a Sass stylesheet that uses @for loops with both through and to keywords to generate CSS classes for background colors with numbered suffixes.

📋 What You'll Learn

Create a Sass list variable with exactly 5 color hex codes.

Create a variable color-count set to the number 5.

Use an @for loop with through to generate CSS classes named .bg-color-1 through .bg-color-5 with background colors from the list.

Use a second @for loop with to to generate CSS classes named .text-color-1 through .text-color-4 with text colors from the list.

💡 Why This Matters

🌍 Real World

Using Sass loops helps you write less repetitive CSS code when you have many similar styles, like color palettes or spacing scales.

💼 Career

Front-end developers often use Sass loops to maintain scalable and maintainable stylesheets, saving time and reducing errors.

1

Create a Sass list of colors

Create a Sass list variable called $colors with these exact hex color values: #ff0000, #00ff00, #0000ff, #ffff00, #ff00ff.

SASS

# Create a Sass list variable called $colors with the 5 exact hex colors
# Your code here

Hint

Use parentheses or commas to create a list in Sass. Example: $list: val1, val2, val3;

2

Create a variable for color count

Create a Sass variable called $color-count and set it to the number 5.

SASS

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #ff00ff);
# Create a variable $color-count and set it to 5
# Your code here

Hint

Assign a number to a variable using $variable-name: value; syntax.

3

Use @for loop with through to create background color classes

Write an @for loop using through with the loop variable $i from 1 through $color-count. Inside the loop, create CSS classes named .bg-color-#{$i} that set background-color to the $ith color from the $colors list.

SASS

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #ff00ff);
$color-count: 5;

# Write an @for loop with through from 1 through $color-count
# Create .bg-color-#{$i} classes with background-color from $colors list
# Your code here

Hint

Use @for $i from 1 through $color-count { ... } and nth($colors, $i) to get the color.

4

Use @for loop with to to create text color classes

Write a second @for loop using to with the loop variable $i from 1 to $color-count. Inside the loop, create CSS classes named .text-color-#{$i} that set color to the $ith color from the $colors list.

SASS

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #ff00ff);
$color-count: 5;

@for $i from 1 through $color-count {
  .bg-color-#{$i} {
    background-color: nth($colors, $i);
  }
}

# Write an @for loop with to from 1 to $color-count
# Create .text-color-#{$i} classes with color from $colors list
# Your code here

Hint

Remember that to excludes the last number, so it loops from 1 up to 4 if $color-count is 5.

Practice

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

easy

A. through includes 5, to stops before 5

B. to includes 5, through stops before 5

C. Both include 5

D. Both stop before 5

Solution

1. Step 1: Understand through keyword

   The through keyword means the loop will include the last number in the range.

2. Step 2: Understand to keyword

   The to keyword means the loop stops before the last number, excluding it.

3. Final Answer:

   through includes 5, to stops before 5 -> Option A

4. Quick Check:

   through includes last number, to excludes last number [OK]

Hint: Remember: through = include last, to = exclude last [OK]

Common Mistakes:

• Confusing which keyword includes the last number
• Thinking both keywords behave the same
• Assuming to includes the last number

2. Which of the following is the correct syntax to loop from 1 up to but not including 5 in Sass?

easy

A. @for $i from 1 through 5 { }

B. @for $i in 1 to 5 { }

C. @for $i from 1 to 5 { }

D. @for $i from 1 until 5 { }

Solution

1. Step 1: Identify correct @for syntax

   The correct syntax uses @for $i from start to end or through.

2. Step 2: Choose syntax for excluding last number

   To exclude the last number, use to, so @for $i from 1 to 5 { } is correct.

3. Final Answer:

   @for $i from 1 to 5 { } -> Option C

4. Quick Check:

   Use to to exclude last number [OK]

Hint: Use 'to' to exclude last number in @for loop [OK]

Common Mistakes:

• Using 'through' when wanting to exclude last number
• Using 'in' instead of 'from'
• Using 'until' which is invalid in Sass

3. What CSS classes will be generated by this Sass code?

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

medium

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

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

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

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

Solution

1. Step 1: Understand loop range with through

   The loop runs from 1 to 3 including 3, so $i = 1, 2, 3.

2. Step 2: Calculate width for each iteration

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

3. Final Answer:

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

4. Quick Check:

   Loop includes 3, widths multiply by $i [OK]

Hint: Remember 'through' includes last number, so 3 iterations [OK]

Common Mistakes:

• Thinking loop stops before 3
• Multiplying width incorrectly
• Missing last class .item-3

4. Identify the error in this Sass code:

@for $i from 1 to 4 {
  .box-#{$i} {
    height: 5px * $i;
  }
}

@for $j from 1 through 4
  .circle-#{$j} {
    width: 5px * $j;
  }

medium

A. Missing curly braces in second loop

B. Using through instead of to in second loop

C. Multiplication syntax is wrong

D. Variable names must be the same in both loops

Solution

1. Step 1: Check syntax of first loop

   The first loop uses correct syntax with curly braces around the block.

2. Step 2: Check syntax of second loop

   The second loop is missing curly braces after the loop declaration, which is required.

3. Final Answer:

   Missing curly braces in second loop -> Option A

4. Quick Check:

   Loops need curly braces for their blocks [OK]

Hint: Always use curly braces {} after @for loop declaration [OK]

Common Mistakes:

• Omitting curly braces after @for
• Confusing 'to' and 'through' keywords
• Incorrect multiplication syntax

5. You want to create 4 buttons with classes .btn-1 to .btn-4 using a Sass @for loop. Which loop should you use to include the last button class .btn-4?

hard

A. @for $i from 1 to 4 { ... }

B. @for $i from 1 through 4 { ... }

C. @for $i from 1 until 4 { ... }

D. @for $i from 1 to 5 { ... }

Solution

1. Step 1: Understand loop range needed

   You want classes from 1 to 4 inclusive, so the loop must include 4.

2. Step 2: Choose correct keyword to include last number

   Using through includes the last number, so @for $i from 1 through 4 is correct.

3. Final Answer:

   @for $i from 1 through 4 { ... } -> Option B

4. Quick Check:

   Use through to include last number [OK]

Hint: Use 'through' to include last number in loop [OK]

Common Mistakes:

• Using 'to' which excludes last number
• Using invalid keyword 'until'
• Using range that goes beyond needed number