Use Sass's @for, @while, and @each rules to generate repeated styles.

Sass has three looping rules. Their syntax is compact and close to plain English.

For loop

An @for loop counts between two numbers:

@for $i from <start> through <end> {
  // Repeated styles
}

through includes the end value. Use to instead to exclude it.

This example creates four columns with decreasing widths:

@use 'sass:math';
 
@for $i from 1 through 4 {
  .col-#{$i} {
    width: math.div(100%, $i);
  }
}

It emits:

.col-1 {
  width: 100%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 33.3333333333%;
}
.col-4 {
  width: 25%;
}

$i holds the current number. The #{$i} syntax interpolates that number into the selector. Use math.div() for division because / is deprecated as a Sass division operator.

While loop

An @while loop runs while its condition is true:

$count: 4;
 
@while $count > 0 {
  .delay-#{$count} {
    animation-delay: $count * 100ms;
  }
 
  $count: $count - 1;
}

Make sure the condition can become false. Prefer @for or @each when either fits; they make the stopping point clearer.

Each loop

An @each loop runs once for every item in a list:

$authors: arnold, sylvester, dolph, jean-claude, chuck;
 
@each $author in $authors {
  .photo-#{$author} {
    background-image: url('/avatars/#{$author}.png');
  }
}

It can also unpack each key and value in a map. For more examples of Sass maps outside a loop, see the Sass maps guide:

$breakpoints: (
  'small': 30rem,
  'medium': 48rem,
  'large': 64rem,
);
 
@each $name, $width in $breakpoints {
  .container-#{$name} {
    max-width: $width;
  }
}