Sass @for Rule

What You’ll Learn

Sass @for counts from one number to another and runs a block for each step. This page covers through vs to, counting up or down, utility scales, grids, and five compiled examples.

What Is @for?

Official docs: the @for rule counts up or down from one number to another and evaluates a block for each number in between. Each number along the way is assigned to the variable you name.

Write it as @for <variable> from <start> through <end> { … } or @for <variable> from <start> to <end> { … }.

• Compile-time only—browsers never see @for.
• Ideal when you need a numeric series (1…n columns, spacing steps, z-index layers).
• through includes the end; to excludes it.
• Use interpolation (#{$i}) to build selectors and values.

📝 Syntax

@for $i from 1 through 3 {
  .step-#{$i} {
    order: $i;
  }
}

⚖️ through vs to

Official docs: if to is used, the final number is excluded; if through is used, it is included.

🔄 Counting Up or Down

If the start is smaller than the end, Sass counts upward. If the start is larger, it counts downward. The same through / to rules still apply.

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

⚖️ @for vs @each

Examples Gallery

Each example generates multiple CSS rules from one numeric loop. Open View Compiled CSS for verified output.

@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%);
  }
}

ul:nth-child(3n+1) {
  background-color: #004080;
}

ul:nth-child(3n+2) {
  background-color: #004d99;
}

ul:nth-child(3n+3) {
  background-color: #0059b3;
}

@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;
  }
}

.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-4 {
  width: 100%;
}

.span-1 {
  flex-grow: 1;
}

.span-2 {
  flex-grow: 2;
}

.span-3 {
  flex-grow: 3;
}

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

.layer-5 {
  z-index: 5;
}

.layer-4 {
  z-index: 4;
}

.layer-3 {
  z-index: 3;
}

.layer-2 {
  z-index: 2;
}

.layer-1 {
  z-index: 1;
}

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

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

.mt-0 {
  margin-top: 0rem;
}

.p-0 {
  padding: 0rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.p-1 {
  padding: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.p-3 {
  padding: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.p-4 {
  padding: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.p-5 {
  padding: 1.25rem;
}

@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);

.item-1 {
  position: absolute;
  top: 0px;
  height: 50px;
}

.item-2 {
  position: absolute;
  top: 50px;
  height: 50px;
}

.item-3 {
  position: absolute;
  top: 100px;
  height: 50px;
}

🚀 Real-World Use Cases

• Grid columns — .col-1….col-12 widths.
• Spacing scales — margin / padding utilities from a numeric step.
• Z-index layers — countdown or ascending stacking classes.
• Nth patterns — striped lists, staggered animations, hue steps.
• Mixin parameters — generate N items from a $count argument.

⚠️ Common Pitfalls

• Confusing to with through — off-by-one bugs are the classic mistake.
• Huge CSS output — @for $i from 1 through 1000 can explode file size.
• Using @for for named tokens — prefer @each for lists and maps.
• Forgetting interpolation — selectors need #{$i}, not bare $i.
• Non-integer ranges — keep ends as whole numbers unless you intentionally need fractional steps.

💡 Best Practices