How to properly group titles under media queries?

Question

Sass

Hi all.
There is a workaround for headers that uses media queries, but using it results in a lot of code. I know that it is possible to somehow compose all this into a mixin, but I can’t figure out how to do it better.
Sandbox

<h1>Lorem ipsum dolor</h1>
<h2>Lorem ipsum dolor</h2>
<h3>Lorem ipsum dolor</h3>
<h4>Lorem ipsum dolor</h4>
<h5>Lorem ipsum dolor</h5>
<h6>Lorem ipsum dolor</h6>

$lg: 991px;
$md: 768px;
$sm: 320px;

@mixin headings( $fz, $lh) {
  font-size: $fz + px;
  line-height: $lh+ px;
}

h1 {
  @include headings(60, 60);

  @media (max-width: $md) {
    @include headings(48, 50);
  }

  @media (max-width: $sm) {
    @include headings(36, 40);
  }
}

h2 {
  @include headings(36, 40);

  @media (max-width: $lg) {
    @include headings(.5, 28, 36);
  }

  @media (max-width: $md) {
    @include headings(.25, 22, 26);
  }
}

h3 {
  @include headings(28, 36);
}

h4 {
  @include headings(22, 26);
}

// demo
body {
  font-family: sans-serif;
}

Tell me, how best to form a mixin, taking into account requests?

Answer 1

Make a size chart.
Like this:

$headings: (
  h1: (
    xs: (font-size: 32px, line-height: 36px),
    sm: (font-size: 38px, line-height: 38px),
    ...
  ),
  ...
)

And in a loop, generate code for all headers at once.