Grid column generator with loops in SASS - Mini Project: Build & Apply

Grid Column Generator with Loops in Sass

📖 Scenario: You are creating a responsive grid system for a website. Instead of writing CSS for each column width manually, you want to use Sass loops to generate classes for grid columns automatically.

🎯 Goal: Build a Sass stylesheet that uses a @for loop to generate grid column classes from .col-1 to .col-12, each with the correct width percentage.

📋 What You'll Learn

Create a Sass variable $total-columns set to 12.

Use a @for loop from 1 through $total-columns.

Generate classes named .col-1 to .col-12.

Each class sets width to the correct fraction of 100% (e.g., .col-6 is 50%).

💡 Why This Matters

🌍 Real World

Grid systems are used in web design to create layouts that adapt to different screen sizes. Automating grid column classes saves time and reduces errors.

💼 Career

Front-end developers often use Sass loops to write cleaner, reusable CSS code for responsive layouts and design systems.

1

Set up the total number of columns

Create a Sass variable called $total-columns and set it to 12.

SASS

# Your code here

Hint

Use $total-columns: 12; to define the total columns.

2

Start the loop to generate column classes

Write a @for loop that counts from 1 through $total-columns.

SASS

$total-columns: 12;

// Your code here

Hint

Use @for $i from 1 through $total-columns { } to start the loop.

3

Generate column classes with correct widths

Inside the @for loop, create a class named .col-#{$i} that sets width to ($i / $total-columns) * 100%.

SASS

$total-columns: 12;

@for $i from 1 through $total-columns {
  // Your code here
}

Hint

Use interpolation .col-#{$i} and calculate width as ($i / $total-columns) * 100%.

4

Complete the grid column generator

Close the @for loop block properly to complete the Sass code.

SASS

$total-columns: 12;

@for $i from 1 through $total-columns {
  .col-#{$i} {
    width: ($i / $total-columns) * 100%;
  }
  // Your code here
}

Hint

Make sure the @for loop block is properly closed with a }.

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