Madeas
@Madeas
UI / UX Designer, Frontend Developer & Unicorn

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

Привет всем.

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

Песочница

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


Подскажите, как лучше сформировать миксин с учетом запросов?
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Сделайте карту размеров.
Типа такой:

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


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы