CODEWITHSUNDEEP
htmlcsssass
Thomas Taylor
Thomas Taylor

Reputation: 874

SASS @for loop increment from specific value to value by amount

I need to use SASS's @for loop to set specific heights for my classes. I would like the output of the @mixin to look like this:

.class-1 {
  height: 45px;
}

.class-2 {
  height: 55px;
}

.class-3 {
  height: 65px;
}

.class-4 {
  height: 75px;
}

This example is close but I can't figure out what calculation I should be using to start at 45, end at 75 and iterate each value by 20: 

@for $i from 0 through 3 {
  $value: ($i + 2) * 20;
  .test-#{$i + 1} { height: $value; }
}

Upvotes: 1

Views: 1372

Answers (2)

Praveen AK
Praveen AK

Reputation: 621

$tile-height: 20;

@mixin tile-height($size) {
    height: $size * $tile-height + px;
}

@for $i from 1 through 5 {
    .h-#{$i}-x {
        @include tile-height($i);
    }
}

Upvotes: 0

Denis Tsoi
Denis Tsoi

Reputation: 10414

The following @for loop generates your desired css:

SCSS:

@for $i from 1 through 4 {
  .class-#{$i} {
     height: 35px + ($i * 10);
  }
}

Yields CSS:

.class-1 {
  height: 45px;
}

.class-2 {
  height: 55px;
}

.class-3 {
  height: 65px;
}

.class-4 {
  height: 75px;
}

Upvotes: 2

Related Questions