0

I want to setup a dynamic font-size counted from rem value for all my headers and I want to do this in for loop. My problem is that I don't know how to divide number to get this result:

  • H1 : 40px (2 rem)
  • H2 : 32px (1.51572rem)
  • H3 : 26,3902px (1.31951rem)
  • H4 : 20px (1 rem)

For loop:

@for $i from 1 through 6 {
  h#{$i} {
    margin-bottom: 1.4rem;
    line-height: (2.8rem / 1.33333333333);
    font: {
      size: 3.2rem - ($i * 0.8);
      family: $header-font;
    }
  }
}
Freestyle09
  • 4,894
  • 8
  • 52
  • 83

1 Answers1

1

Why dont use an array of possible values instead of creating an algorithm returning the right number. You can create an array with $myArray: (1,2,3,4) and use it like this nth($myArray, $i+1) - see following post Accessing an array key in SASS

J. Knabenschuh
  • 747
  • 4
  • 15
  • Yeah I solved my issue but still don't know how to divide to get dynamic numbers :/ – Freestyle09 Jun 25 '19 at 12:00
  • 1
    Oh sorry XD I think the problem is the unit. To divide ignore the unit first and then append it. - see https://stackoverflow.com/questions/19417081/doing-math-on-variable-argument-sass-mixins – J. Knabenschuh Jun 25 '19 at 12:37