Why Grid column generator with loops in SASS? - Purpose & Use Cases

The Big Idea

Discover how a simple loop can save you hours of tedious CSS work!

The Scenario

Imagine you are building a website layout with many columns. You write CSS rules for each column width by hand, like .col-1 { width: 8.33%; }, .col-2 { width: 16.66%; }, and so on.

The Problem

If you want to change the number of columns or add new ones, you must update every rule manually. This is slow, boring, and easy to make mistakes. Your code becomes long and hard to maintain.

The Solution

Using a grid column generator with loops in Sass, you write one loop that creates all column widths automatically. This saves time, reduces errors, and keeps your code clean and flexible.

Before vs After

✗ Before

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }

✓ After

@for $i from 1 through 12 {
  .col-#{$i} {
    width: (100% / 12) * $i;
  }
}

What It Enables

You can quickly create responsive grid layouts with any number of columns, just by changing one number.

Real Life Example

When building a blog page, you can easily switch from a 3-column layout to a 4-column layout without rewriting CSS for each column size.

Key Takeaways

Writing column widths manually is slow and error-prone.

Loops in Sass automate generating grid columns.

This makes layouts flexible and easy to update.

Practice

1. What does the @for loop in SASS help you do when creating grid columns?

easy

A. Add images to grid columns

B. Create JavaScript functions for grid behavior

C. Write HTML grid elements faster

D. Generate multiple CSS classes for different column widths automatically

Solution

1. Step 1: Understand the purpose of @for in SASS

   The @for loop repeats code blocks a set number of times, useful for generating CSS classes.

2. Step 2: Connect @for with grid columns

   Using @for, you can create many classes like .col-1, .col-2, etc., each with different widths.

3. Final Answer:

   Generate multiple CSS classes for different column widths automatically -> Option D

4. Quick Check:

   @for loop = Generate CSS classes [OK]

Hint: Think of @for as a shortcut to write many classes fast [OK]

Common Mistakes:

• Confusing SASS loops with JavaScript loops
• Thinking @for writes HTML elements
• Assuming it adds images or content

2. Which of the following is the correct SASS syntax to create a loop from 1 to 4 for grid columns?

easy

A. @each $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } }

B. @for $i in 1 to 4 { .col-#{$i} { width: 25% * $i; } }

C. @for $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } }

D. @loop $i from 1 to 4 { .col-#{$i} { width: 25% * $i; } }

Solution

1. Step 1: Recall correct @for syntax in SASS

   The correct syntax uses @for $var from start through end to include the end number.

2. Step 2: Check each option

   @for $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } } uses @for $i from 1 through 4, which is correct. Options A, B, and C use invalid keywords or syntax.

3. Final Answer:

   @for $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } } -> Option C

4. Quick Check:

   Correct @for syntax = @for $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } } [OK]

Hint: Remember: use 'from' and 'through' for inclusive loops in SASS [OK]

Common Mistakes:

• Using 'in' instead of 'from' and 'through'
• Using '@loop' which is not valid SASS
• Confusing '@each' with '@for'

3. Given this SASS code:

@for $i from 1 through 3 {
  .col-#{$i} {
    grid-column: span $i;
  }
}

What CSS will be generated?

medium

A. .col-1 { grid-column: span 3; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 1; }

B. .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }

C. .col-1 { grid-column: 1; } .col-2 { grid-column: 2; } .col-3 { grid-column: 3; }

D. Syntax error, no CSS generated

Solution

1. Step 1: Understand the loop iterations

   The loop runs for $i = 1, 2, 3, creating classes .col-1, .col-2, .col-3.

2. Step 2: Check the property values

   Each class sets grid-column: span $i;, so .col-1 spans 1 column, .col-2 spans 2, and .col-3 spans 3.

3. Final Answer:

   .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } -> Option B

4. Quick Check:

   Loop variable $i matches span value [OK]

Hint: Match loop variable to property value inside the loop [OK]

Common Mistakes:

• Confusing 'span $i' with just '$i'
• Reversing the span values
• Assuming syntax error due to interpolation

4. Identify the issue in this SASS code for generating grid columns from 1 to 4:

@for $i from 1 to 4 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

medium

A. Using 'to' instead of 'through' in the loop range

B. Missing interpolation in class name

C. Division inside width property is invalid

D. Loop variable $i is not declared

Solution

1. Step 1: Check the loop syntax

   The loop uses @for $i from 1 to 4, which excludes the end number 4. Use through to include it.

2. Step 2: Verify other parts

   Class name uses interpolation correctly. Division in width is valid in SASS. Loop variable is declared.

3. Final Answer:

   Using 'to' instead of 'through' in the loop range -> Option A

4. Quick Check:

   Loop range must use 'through' for inclusive end [OK]

Hint: Use 'through' to include last number in @for loops [OK]

Common Mistakes:

• Using 'to' which excludes the last number
• Forgetting interpolation in class names
• Thinking division in width is invalid

5. You want to create grid column classes from 1 to 6, but only for even numbers, using SASS loops. Which code correctly generates classes .col-2, .col-4, and .col-6 with widths as fractions of 6 columns?

hard

A. @for $i from 2 through 6 {
@if $i % 2 == 0 {
.col-#{$i} {
width: (100% / 6) * $i;
}
}
}

B. @for $i from 1 through 6 {
@if $i / 2 == 0 {
.col-#{$i} {
width: (100% / 6) * $i;
}
}
}

C. @each $i from (2, 4, 6) {
.col-#{$i} {
width: (100% / 6) * $i;
}
}

D. @for $i from 2 to 6 step 2 {
.col-#{$i} {
width: (100% / 6) * $i;
}
}

Solution

1. Step 1: Understand how to loop only even numbers

   SASS @for loops do not support 'step' directly, so use @if $i % 2 == 0 to filter even numbers.

2. Step 2: Check each option

   @for $i from 2 through 6 { @if $i % 2 == 0 { .col-#{$i} { width: (100% / 6) * $i; } } } uses @if $i % 2 == 0 correctly. @for $i from 1 through 6 { @if $i / 2 == 0 { .col-#{$i} { width: (100% / 6) * $i; } } } uses division instead of modulo, which is wrong. @each $i from (2, 4, 6) { .col-#{$i} { width: (100% / 6) * $i; } } uses invalid syntax ('from' instead of 'in' for @each). @for $i from 2 to 6 step 2 { .col-#{$i} { width: (100% / 6) * $i; } } uses invalid 'step' syntax.

3. Final Answer:

   @for $i from 2 through 6 { @if $i % 2 == 0 { .col-#{$i} { width: (100% / 6) * $i; } } } -> Option A

4. Quick Check:

   Use modulo (%) to filter even numbers in loops [OK]

Hint: Use modulo (%) inside @if to pick even numbers in @for loops [OK]

Common Mistakes:

• Using division (/) instead of modulo (%) for condition
• Trying to use 'step' in @for which is invalid
• Confusing @each with @for loops