CODEWITHSUNDEEP
sassincrement
Danny Lewandowski
Danny Lewandowski

Reputation: 91

SASS multiple increment values in @for statement

I have a loop that generates number from 0-5, but would like it to also generate up to 20, but in multiples of 5.

Desired results would be:

0, 1, 2, 3, 4, 5, 10, 15, 20

Is this possible in a single @for statement?

Upvotes: 2

Views: 665

Answers (1)

Stephen C
Stephen C

Reputation: 863

@for $i from 0 through 20 {
  @if $i < 5 and $i > 0 {
    .number-#{$i} {
            height:(#{$i}px);
        }
  }
    @if $i % 5 == 0 {
        .number-#{$i} {
            height:(#{$i}px);
        }
    }
}

The output would be 

.number-0 {
  height: 0px;
}

.number-1 {
  height: 1px;
}

.number-2 {
  height: 2px;
}

.number-3 {
  height: 3px;
}

.number-4 {
  height: 4px;
}

.number-5 {
  height: 5px;
}

.number-10 {
  height: 10px;
}

.number-15 {
  height: 15px;
}

.number-20 {
  height: 20px;
}

The for loop will go through 0 to 20. The I check 1-5 through the first if statement, the using modulus I I check divisible by 5.

Upvotes: 4

Related Questions