Lesson 5: Loops for Grid Generation

What are Loops in SCSS?

Loops let you generate CSS automatically by repeating code with different values. Instead of writing 12 separate classes for 12 grid columns, write one loop and SCSS creates them all for you. This is perfect for creating comprehensive grid systems!

💡 Why Loops Matter:

Loops save you from writing hundreds of lines of repetitive code. Generate entire grid systems, spacing utilities, and responsive classes automatically!

The @for Loop

The @for loop repeats code a specific number of times:

// Generate column span classes
@for $i from 1 through 12 {
  .col-#{$i} {
    grid-column: span $i;
  }
}

This creates:

/* Compiled CSS */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
/* ... up to ... */
.col-12 { grid-column: span 12; }

Generating Grid Template Columns

// Create 1-12 column grid classes
@for $cols from 1 through 12 {
  .grid-cols-#{$cols} {
    display: grid;
    grid-template-columns: repeat($cols, 1fr);
  }
}

Now you have .grid-cols-1 through .grid-cols-12 automatically!

The @each Loop

The @each loop iterates over a list or map:

// Loop through spacing values
$spacing-values: 0, 8, 16, 24, 32, 48, 64;

@each $space in $spacing-values {
  .gap-#{$space} {
    gap: #{$space}px;
  }
}

Generates: .gap-0, .gap-8, .gap-16, etc.

Loop with Maps

Use maps for more complex loop data:

$grid-breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px
);

@each $name, $width in $grid-breakpoints {
  @media (min-width: $width) {
    .container-#{$name} {
      max-width: $width;
    }
  }
}

✅ Real-World Use:

This is how frameworks like Bootstrap and Tailwind generate their utility classes! You're learning professional techniques.

Complete Grid System with Loops

// Configuration
$grid-columns: 12;
$grid-gaps: (0, 4, 8, 12, 16, 20, 24, 32, 40, 48);

// Generate column span classes
@for $i from 1 through $grid-columns {
  .col-span-#{$i} {
    grid-column: span $i;
  }
}

// Generate row span classes
@for $i from 1 through 6 {
  .row-span-#{$i} {
    grid-row: span $i;
  }
}

// Generate gap utilities
@each $gap in $grid-gaps {
  .gap-#{$gap} {
    gap: #{$gap}px;
  }
}

// Generate grid template columns
@for $cols from 1 through $grid-columns {
  .grid-cols-#{$cols} {
    display: grid;
    grid-template-columns: repeat($cols, 1fr);
  }
}

Conditional Loops with @if

Combine loops with conditions for smart generation:

@for $i from 1 through 12 {
  .col-#{$i} {
    grid-column: span $i;
    
    // Special styling for half-width columns
    @if $i == 6 {
      border-left: 2px solid #ddd;
    }
    
    // Full width gets different treatment
    @if $i == 12 {
      padding: 20px 0;
    }
  }
}

Nested Loops for Responsive Grids

$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px
);

// Generate responsive grid classes
@each $bp-name, $bp-value in $breakpoints {
  @media (min-width: $bp-value) {
    @for $cols from 1 through 12 {
      .#{$bp-name}\:grid-cols-#{$cols} {
        grid-template-columns: repeat($cols, 1fr);
      }
    }
  }
}

Creates classes like: .sm:grid-cols-3, .md:grid-cols-4, .lg:grid-cols-6

@while Loop (Advanced)

Less common but useful for specific cases:

$i: 1;

@while $i <= 5 {
  .grid-#{$i}x {
    grid-template-columns: repeat($i, 1fr);
    gap: #{$i * 8}px;  // Gap increases with columns
  }
  
  $i: $i + 1;
}

Practical Example: Complete Utility System

// Design tokens
$columns: 12;
$spacing-scale: (
  xs: 4px,
  sm: 8px,
  md: 16px,
  lg: 24px,
  xl: 32px,
  2xl: 48px
);

// Column utilities
@for $i from 1 through $columns {
  .col-#{$i} {
    grid-column: span $i;
  }
  
  .col-start-#{$i} {
    grid-column-start: $i;
  }
  
  .grid-cols-#{$i} {
    grid-template-columns: repeat($i, 1fr);
  }
}

// Gap utilities from spacing scale
@each $name, $size in $spacing-scale {
  .gap-#{$name} {
    gap: $size;
  }
  
  .gap-x-#{$name} {
    column-gap: $size;
  }
  
  .gap-y-#{$name} {
    row-gap: $size;
  }
}

// Grid auto-flow utilities
$flow-directions: row, column, dense, row-dense, column-dense;

@each $direction in $flow-directions {
  .grid-flow-#{$direction} {
    grid-auto-flow: $direction;
  }
}

⚡ Performance Warning:

Loops generate A LOT of CSS! A full 12-column responsive grid system can create thousands of classes. Only generate what you'll actually use, or use a CSS purging tool like PurgeCSS to remove unused styles.

🔁 Lesson 5: Loops for Grid Generation