Sass @for Rule

Beginner
10 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass @for rule counting numeric ranges with through and to
Definition

Definition and Usage

The Sass @for rule counts from one number to another and evaluates a block once per number. Each number is assigned to a variable you name.

Write @for $i from <start> through <end> { … } to include the end, or from <start> to <end> to exclude it. Sass counts up or down. Prefer @for when you need a numeric range; prefer @each when you already have a list or map of values.

Official pattern.

Per the Sass docs: through includes the final number; to excludes it. Use interpolation (#{$i}) to build selectors.

Compile-time only.

Browsers never see @for — only the CSS generated for each iteration.

Deprecated global lighten().

Official samples sometimes show lighten(). Prefer @use "sass:color" and color.adjust(…, $lightness: …) in modern Dart Sass.

Syntax

Syntax

SCSS
@use "sass:color";

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: color.adjust($base-color, $lightness: $i * 5%);
  }
}

Pattern: pick a range → @for $i from … → emit CSS per number.

Reference

Range Forms

Core @for shapes:

FormMeaning
@for $i from 1 through 3Runs 1, 2, 3 (end included)
@for $i from 1 to 3Runs 1, 2 (end excluded)
@for $i from 5 through 1Counts down: 5…1
@for $i from 0 to $nZero-based loop for $n iterations
Code

SCSS Examples

Short, copy-ready snippets. Open View Compiled CSS for verified output.

Example 1 — :nth-child Color Steps

Official-docs style: adjust a base color for each index in the range.

SCSS
@use "sass:color";

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: color.adjust($base-color, $lightness: $i * 5%);
  }
}

How It Works

  1. $i becomes 1, then 2, then 3 (through includes 3).
  2. Interpolate #{$i} into the :nth-child selector.
  3. Scale lightness with $i * 5% via color.adjust.
  4. Each pass emits one rule into the CSS.

Example 2 — through vs to

Four-column widths with through; flex grow steps with to.

SCSS
@use "sass:math";

@for $i from 1 through 4 {
  .col-#{$i} {
    width: math.percentage(math.div($i, 4));
  }
}

@for $i from 1 to 4 {
  .span-#{$i} {
    flex-grow: $i;
  }
}

How It Works

  1. through 4 emits .col-1….col-4.
  2. to 4 stops before 4 — only .span-1….span-3.
  3. Use math.div for safe division in modern Sass.
  4. Pick through when the end value should appear in CSS.

Example 3 — Count Down for Z-Index Layers

Start high and walk down to emit stacking classes.

SCSS
@for $i from 5 through 1 {
  .layer-#{$i} {
    z-index: $i;
  }
}

How It Works

  1. Start (5) is greater than end (1).
  2. Sass counts downward: 5, 4, 3, 2, 1.
  3. Each number becomes a class and a matching z-index.
  4. No special keyword is needed for reverse loops.

Example 4 — Spacing Utility Scale

Generate margin and padding steps from 0 through 5.

SCSS
@for $i from 0 through 5 {
  .mt-#{$i} {
    margin-top: $i * 0.25rem;
  }

  .p-#{$i} {
    padding: $i * 0.25rem;
  }
}

How It Works

  1. One loop writes two utility families.
  2. Multiply $i by the step size (0.25rem).
  3. Including 0 gives zero-spacing utilities.
  4. Change the step once to rescale the whole system.

Example 5 — Zero-Based Item Stack

Use from 0 to $count to position $count stacked items.

SCSS
@mixin order-stack($count, $height: 40px) {
  @for $i from 0 to $count {
    .item-#{$i + 1} {
      position: absolute;
      top: $i * $height;
      height: $height;
    }
  }
}

@include order-stack(3, 50px);

How It Works

  1. from 0 to $count runs exactly $count times.
  2. Class names use $i + 1 for 1-based labels.
  3. Offsets use raw $i for zero-based positioning.
  4. Pass height once to space every item evenly.

Edge Cases & Pitfalls

Most @for bugs are through vs to, huge ranges, or choosing the wrong loop.

through

through includes the end

from 1 through 3 runs three times. from 1 to 3 runs twice. Off-by-one bugs usually start here.

output

Large ranges grow CSS fast

Every iteration emits real CSS. Keep utility scales intentional for production builds.

each

Have values already? Use @each

If you own a list or map of tokens, @each is clearer than inventing indexes with @for.

units

Ends must be numbers

Start and end expressions must resolve to numbers. Compatible units are fine; mixed incompatible units fail at compile time.

Toolchain

Sass Support

@for is a core Dart Sass control rule. It is not a browser CSS feature — support means your Sass compiler understands it.

ImplementationStatus
Dart SassSupported (recommended)
LibSass / node-sassSupported (deprecated toolchain)
Ruby SassSupported (end-of-life)
BrowsersN/A — only see compiled CSS

Prefer Dart Sass for new projects. SCSS and indented syntax both support @for.

Remember

Key Takeaways

  • Count: @for $i from … assigns each number to $i.
  • through includes the end; to excludes it.
  • Direction: start > end counts down automatically.
  • Have tokens? Prefer @each over inventing indexes.

One line: @for walks a numeric range and emits CSS once per number.

Compile

Compile Notes

@for never reaches the browser. Conceptual flow:

flow.txt
1. Evaluate start and end numbers
2. Decide direction (up if start ≤ end, else down)
3. Include or exclude the end (through vs to)
4. Bind $i, evaluate the block, emit CSS
5. Step to the next number until the range ends

Frequently Asked Questions

It counts from one number to another and evaluates a block once per number, assigning that number to a variable you name. The loop runs at compile time.
through includes the end number. to excludes it. So from 1 through 3 runs 1, 2, 3; from 1 to 3 runs 1, 2.
Yes. If the start is greater than the end (for example from 5 through 1), Sass counts down.
No. @for is compile-time only. Browsers see the styles generated for each iteration.
@for walks a numeric range. @each walks values in a list or map. Use @for when you need to count; use @each when you already have the items.
Yes. Both ends can be any Sass expressions that resolve to numbers (including variables and math).

Next: Sass @while Rule

Loop while a condition stays true — useful for step algorithms.

Sass @while Rule →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass @each Rule Sass @while Rule