SASS - for h1-h6 style

Question

I have SCSS style like this, I want to use @for from SCSS to write this more efficient.

So far:

@for $i from 1 through 6 {
  h#{$i} {
    $size: {$i} * 1.4;
    @include font-size($size);
  }
}

Note: don't mind calculation of size, its just for test

but syntax is not right.

Expected output

h1 {
  @include font-size(3.2);
}

h2 {
  @include font-size(2.4);
}

h3 {
  @include font-size(1.8);
}

h4 {
  @include font-size(1.6);
}

h5 {
  @include font-size(1.3);
}

h6 {
  @include font-size(1.2);
}

Answer 1

The main issue is your h1 increasing in size as it gets to a higher number (because you are using $i incrementally). You can escape that by reducing the h-number size using the formula 7 - $i.

@for $i from 1 through 6 {
    h#{7 - $i} {
        fontsize: $i * 1.4em;
    }
}

The output here is:

h6 { font-size:1.4em }
h5 { font-size:2.8em }
h4 { font-size:4.2em }
h3 { font-size:5.6em }
h2 { font-size:7em }
h1 { font-size:8.4em }

Which seems to make sense. The original error you were getting was this:

Invalid CSS after "$size:": expected expression (e.g. 1px, bold), was "{$i} * 1.4;"

Because you can simply use $i as a number without special denotation.

To get the numbers to match with your question, you should actually find a way to calculate them on the fly - and the numbers you have shown above are not a pattern, so they are not mathematically controllable. Here's what you could do:

@for $i from 1 through 6 {
    h#{7 - $i} {
        fontsize: 3.4em / 6 * $i;
    }
}

The reason this cannot be computed mathematically like your question desires is: h1 - h2 = .6em, h2 - h3 = .6em, h3 - h4 = .2em => That last one does not fall into line with any particular pattern.