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

Need a 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

Need a 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
}

Need a 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
}

Need a hint?

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