Loops in CSS Preprocessors: A Complete Guide

Understanding CSS Preprocessor Loops

CSS preprocessors have revolutionized how developers write stylesheets, extending CSS with programming constructs like variables, functions, and loops. Among these features, loops stand out as particularly powerful for generating repetitive styles efficiently.

Writing CSS manually for every variation of a design element is tedious and error-prone. Whether you need responsive breakpoints for different screen sizes, color variations for a design system, or grid column definitions, loops in CSS preprocessors let you express these patterns concisely and maintainably.

Modern web development with frameworks like Next.js benefits significantly from well-organized stylesheets. Loops help maintain consistency across large codebases while reducing the potential for human error. Discover how our web development services leverage these techniques to build scalable, maintainable websites.

The @for Directive: Counting Through Iterations

The @for directive repeats styles a specified number of times, using a counter variable to generate sequential values. Two variants exist: through includes the endpoint value, while to stops before reaching it. This distinction matters when precise control over iteration bounds is required.

Grid Column Generation

CSS Grid layouts often require column class definitions. A @for loop generates these systematically, ensuring consistent naming and calculation across all column sizes.

$columns: 12;

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

Creating Type Scale Classes

Typography systems benefit from systematic generation of size classes. A loop based on a multiplier creates a harmonious scale, applying consistent ratios across all heading levels and body text sizes.

$type-scale: 1.25;
$base-size: 1rem;

@for $i from 1 through 6 {
 .text-#{$i} {
 font-size: $base-size * pow($type-scale, $i - 1);
 }
}

The through variant includes the endpoint, while to stops before it. The counter variable $i creates dynamic class names using Sass interpolation #{$i}. For projects using Next.js, efficient CSS generation through loops impacts build times and bundle sizes by producing optimal CSS output requiring no runtime processing.

Explore more CSS optimization techniques and learn how modern frameworks benefit from systematic stylesheet architecture.

The @each Directive: Iterating Over Collections

The @each directive processes each item in a list or map, making it ideal for applying styles to multiple values. Unlike @for, which uses numeric iteration, @each works with named values, improving code readability for categorical styling.

Color Theme Generation

Design systems often include multiple color themes or variants. An @each loop applies a consistent pattern across all theme colors, generating appropriate utility classes or component styles.

$themes: (
 "primary": #2563eb,
 "secondary": #7c3aed,
 "success": #059669,
 "warning": #d97706,
 "danger": #dc2626
);

@each $name, $color in $themes {
 .btn-#{$name} {
 background-color: $color;
 color: white;

 &:hover {
 background-color: darken($color, 10%);
 }
 }
}

Icon Size Variants

Icon systems require consistent sizing across multiple display sizes. An @each loop with a breakpoints map generates size classes systematically, referencing predefined size values.

$sizes: sm, md, lg, xl;

@each $size in $sizes {
 .icon-#{$size} {
 width: map-get($icon-sizes, $size);
 height: map-get($icon-sizes, $size);
 }
}

Sass lists contain comma or space-separated values representing categories like color palettes or font families, while maps provide key-value pairs for configuration-driven styling. Raygun's analysis confirms that @each dramatically improves maintainability for design systems with multiple variants.

Discover how these patterns integrate with component-based development and build scalable design systems efficiently.

The @while Directive: Conditional Iteration

The @while directive repeats styles until a condition evaluates to false, providing more flexible iteration than @for. This construct proves useful when iteration depends on dynamic conditions rather than fixed counts.

Generating Modular Scale Classes

A modular scale requires iterative calculation where each value depends on the previous one. While loops handle such scenarios by maintaining state across iterations, generating values until reaching a threshold.

$base: 1rem;
$ratio: 1.5;
$max-size: 4rem;
$i: 0;

@while $base * pow($ratio, $i) <= $max-size {
 .text-scale-#{$i} {
 font-size: $base * pow($ratio, $i);
 }
 $i: $i + 1;
}

Conditional Class Generation

When class generation depends on dynamic data or external conditions, @while provides flexibility. This approach suits scenarios where iterations cannot be determined statically.

$count: 1;
$max-items: 10;

@while $count <= $max-items {
 .item-#{$count} {
 flex-basis: calc(100% / #{$count});
 }
 $count: $count + 1;
}

While loops require careful condition design to avoid infinite iterations. The condition must eventually become false, typically through counter increments within the loop body. Debugging requires examining condition logic carefully. Consider whether @for or @each might better serve your use case before reaching for @while. Explore related CSS techniques in our guide on CSS keyframe animations to expand your stylesheet expertise.

Performance Considerations

Compilation-Time Impact

Loop processing occurs during stylesheet compilation, not at runtime. Well-structured loops add no JavaScript overhead to the final website. The compiled CSS contains only the generated rules, maintaining optimal browser rendering performance.

Large numbers of iterations increase compilation time, though this impact is typically negligible for modern build systems. Profiling compilation helps identify if loop-heavy stylesheets cause noticeable delays, particularly in incremental build workflows common in development environments.

CSS Output Optimization

Generated CSS from loops should follow best practices for selector efficiency. Overly specific selectors created through loops can impact stylesheet size and browser selector matching performance.

// Generates efficient, flat selectors
@for $i from 1 through 12 {
 .grid-col-#{$i} {
 flex: 0 0 calc(100% * #{$i} / 12);
 }
}

Avoiding Common Pitfalls

• Nested loops multiply output exponentially: A double loop with fifty iterations in each dimension produces 2,500 output rules
• Conditional logic within loops can create inconsistent output if conditions use dynamic values
• Always verify generated CSS size matches expectations, particularly for component libraries with many variants

Keep generated selectors flat and modular to prevent selector matching performance issues. Learn more about CSS performance optimization for production deployments.

LESS and Stylus Loop Alternatives

LESS Guarded Mixins

LESS does not provide traditional loop constructs but achieves similar results through guarded mixins. These conditional mixins use when blocks to determine application, iteratively generating output through recursion.

.generate-columns(@n, @i: 1) when (@i =< @n) {
 .col-@{i} {
 width: (100% / @i);
 }
 .generate-columns(@n, (@i + 1));
}

.generate-columns(12);

This recursive mixin generates twelve column classes, with the guard condition controlling iteration. The technique works effectively for known iteration counts but becomes complex for dynamic ranges.

Stylus Iteration

Stylus provides both for loops and while loops with Python-like syntax. The language's flexible punctuation rules make loop syntax particularly readable, with optional brackets and semicolons.

for i in 1..12
 .grid-col-{i}
 width: (100% / i)

Sass remains the preprocessor of choice for complex stylesheet architecture due to its robust control directives. Migration between preprocessors requires understanding these syntax differences, as each approach has distinct strengths suited to different project requirements and team preferences.

Best Practices for Loop Implementation

Keep Loops Focused

Each loop should serve a single purpose, generating one type of output. Combining multiple generation patterns in a single loop reduces readability and complicates maintenance. Separate loops for different concerns produce clearer, more maintainable code.

Use Descriptive Variable Names

Counter variables like $i work for simple loops, but meaningful names improve comprehension for complex iterations. When iterating over themes, use $theme-name and $theme-color rather than generic names.

Document Generated Output

Comments explaining what loops generate help future maintainers understand the stylesheet architecture. Document the expected output count, naming conventions, and any configuration variables that affect generation.

Test Generated CSS

Verifying generated CSS matches expectations prevents subtle errors from propagating. Automated testing of stylesheet compilation catches issues before deployment, particularly valuable for large-scale design system projects.

Extract Complex Calculations

When loops involve complex formulas, extract calculations into mixins or functions. This approach improves readability and makes patterns reusable across different contexts. Explore more CSS architecture patterns for building maintainable stylesheets at scale, including techniques like CSS border styling to enhance your design system implementation.

Sources

1. Sass-lang: Official Guide
2. Raygun: Popular CSS Preprocessors with Examples
3. Font-size.com: Sass vs SCSS vs Less Guide 2026
4. MDN Web Docs: CSS