A simple Sass loop

Posted on Tuesday, 26 November 2019

A simple Sass for loop to grab and go.

The Sass

@for $i from 1 through 3 {
  .class-#{$i} {
    height: #{$i * 2}px;
    width: #{$i}px;
    z-index: $i;
  }
}

The generated CSS

.class-1 {
  height: 2px;
  width: 1px;
  z-index: 1;
}

.class-2 {
  height: 4px;
  width: 2px;
  z-index: 2;
}

.class-3 {
  height: 6px;
  width: 3px;
  z-index: 3;
}

Source: Sass control directives: @if, @for, @each and @while