Как правильно сгруппировать заголовки под медиа запросы?

Question

[Andrej Sharapov]

Привет всем.

Есть наработка для заголовков, которая использует медиа запросы, но при ее использовании получается много кода. Знаю, что можно все это как-то скомпоновать в миксин, но не могу понять как это лучше сделать.

Песочница

<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;
}

Подскажите, как лучше сформировать миксин с учетом запросов?

Answer 1

[Сергей delphinpro]

Сделайте карту размеров.
Типа такой:

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

И в цикле формируйте код для всех заголовков разом.