Отзывчивый Типография С Sass Карты

Управляющий последовательным, типографская ритм не легко, но когда тип реагирует, все становится еще сложнее.К счастью, Sass карты делают реагировать типография гораздо более управляемым .

Написание кода это одно, но отслеживать значения размера шрифта для каждой точки другой — и выше для одних пунктах.Бросок в h1 к h6 ы, каждый с переменными размерами шрифта для каждой точки, и он получает громоздким, особенно если тип не изменяется линейно .

Если вы пытались решить отзывчивый тип, это может выглядеть знакомо:

p { font-size: 15px; }

@media screen and (min-width: 480px) {
  p { font-size: 16px; }
}
@media screen and (min-width: 640px) {
  p { font-size: 17px; }
}
@media screen and (min-width: 1024px) {
  p { font-size: 19px; }
}

Sass переменные являются большими для принятия значения многоразовые на протяжении проекта, но управление им для чувствительных размеров шрифтов легко становится беспорядок .

$p-font-size-mobile : 15px;
$p-font-size-small  : 16px;
$p-font-size-medium : 17px;
$p-font-size-large  : 19px;

$h1-font-size-mobile: 28px;
$h1-font-size-small : 31px;
$h1-font-size-medium: 33px;
$h1-font-size-large : 36px;

// I think you get the point…

Это где Сасс maps __11 | | 1__10 и петли мощный: Они помогли мне управлять г-индекс values 2 , colors 3 и, как вы увидите в момент, размеры шрифта .

Организация размеры шрифта Сасс Maps

Давайте начнем с создания Сасс карту с пар ключ-значение — точки останова, ключи и размеров шрифта, как соответствующие значения .

$p-font-sizes: (
  null  : 15px,
  480px : 16px,
  640px : 17px,
  1024px: 19px
);

С подвижной первым в виду, мы видим, что ключ null представляет размер шрифта по умолчанию (не в СМИ запроса), и точки останова в порядке возрастания .

Далее примесь, которая выполняет итерацию по карте Сасс и генерирует соответствующие запросы СМИ .

@mixin font-size($fs-map) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      font-size: $fs-font-size;
    }
    @else {
      @media screen and (min-width: $fs-breakpoint) {
        font-size: $fs-font-size;
      }
    }
  }
}

Примечание: Стоит отметить, что это примесь, наряду с теми, чтобы следовать, есть некоторые основные логики программирования.Сасс, с помощью SassScript __39 | | 4__10 (набор расширений, который поставляется запеченная в), делает основной программирования строит можно, как if / else отчетности, ~ 25 петель и |тонну больше.Я призываю вас, чтобы занять некоторое время, чтобы прочитать documentation __45 | | 5__10 .”Особенности питания” Sass ‘познакомит Вас в новое измерение вещей, которые вы можете сделать с Sass .

Мы затем использовать для подмешать пунктах:

p {
  @include font-size($p-font-sizes);
}

… Что приводит к следующему CSS:

p { font-size: 15px; }

@media screen and (min-width: 480px) {
  p { font-size: 16px; }
}
@media screen and (min-width: 640px) {
  p { font-size: 17px; }
}
@media screen and (min-width: 1024px) {
  p { font-size: 19px; }
}

Управляющий и отслеживание размеров шрифта для элементов становится намного проще!С каждым новым элементом, создать карту и позвонить подмешать в соответствующем селектора .

$h1-font-sizes: (
  null  : 28px
  480px : 31px,
  640px : 33px,
  1024px: 36px
);

h1 {
  @include font-size($h1-font-sizes);
}

Держите размеров шрифта соответствует для различных элементов:

p, ul, ol {
  @include font-size($p-font-sizes);
}

РешениеТочка останова Fragmentation

Но подождите!Что делать, если мы решим, что мы хотим, размер шрифта 30 ~ | с быть 17 пикселей и, h1 ы, чтобы быть 33 пикселей в точке останова 700 пикселей, вместо 640 пикселей?С учетом указанных выше раствора, что потребует ручного изменения каждый экземпляр 640px.Пытаясь решить одну проблему, мы невольно создал другую: останова фрагментация .

Если мы можем управлять размеры шрифтов в Sass карты, безусловно, мы можем сделать то же самое с точки останова, верно?Именно

Давайте создадим карту для общих точек останова и назначить каждому значению соответствующее имя.Мы также изменить размеры шрифта карту немного с помощью останова имена мы, назначенных в $breakpoints, чтобы установить отношения между останова и размеры шрифта отображает .

$breakpoints: (
  small : 480px,
  medium: 700px, // Previously 640px
  large : 1024px
);

$p-font-sizes: (
  null  : 15px,
  small : 16px,
  medium: 17px,
  large : 19px
);

$h1-font-sizes: (
  null  : 28px,
  small : 31px,
  medium: 33px,
  large : 36px
);

Последний шаг, чтобы настроить подмешать немного, так что, когда он перебирает шрифта-размеры карте, то буду использовать точки останова имя, чтобы получить соответствующее значение из $breakpoints перед генерацией запроса СМИ .

@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      font-size: $fs-font-size;
    }
    @else {
      // If $fs-font-size is a key that exists in
      // $fs-breakpoints, use the value
      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      }
      @media screen and (min-width: $fs-breakpoint) {
        font-size: $fs-font-size;
      }
    }
  }
}

Примечание: подмешать в точки останова по умолчанию карта $breakpoints;если имя точки останова переменной отличается, не забудьте изменить его по второму аргументу линии 1 .

Вуаля!Теперь, что если мы хотим элемент имеет размер шрифта для пользовательского останова, что не существует в $breakpoints?В размера шрифта карте, просто капля в останова значения вместо имени в качестве ключа, и примесь сделает всю работу за вас:

$p-font-sizes: (
  null  : 15px,
  small : 16px,
  medium: 17px,
  900px : 18px,
  large : 19px,
  1440px: 20px,
);

p {
  @include font-size($p-font-sizes);
}

Магия происходит в подмешать благодаря Сасса ‘ map-has-key function 6 .Он проверяет, существует ли имя ключа в $breakpoints Если она существует, то будем использовать значение ключа;если нет, то будем считать, ключ таможенная стоимость и использовать, что вместо при генерации запроса СМИ .

p { font-size: 15px; }

@media screen and (min-width: 480px) {
  p { font-size: 16px; }
}
@media screen and (min-width: 700px) {
  p { font-size: 17px; }
}
@media screen and (min-width: 900px) {
  p { font-size: 18px; }
}
@media screen and (min-width: 1024px) {
  p { font-size: 19px; }
}
@media screen and (min-width: 1440px) {
  p { font-size: 20px; }
}

Улучшение Вертикальная ритм линии Height

Высота линии также важной частью достижения последовательного вертикального ритма.Так, не выходя за борт, давайте включим высоту строки в решении .

Продлить шрифт-размеры карту, в том числе как размер шрифта и высоту строки в списке в качестве значения нужного ключа:

$breakpoints: (
  small : 480px,
  medium: 700px,
  large : 1024px
);

$p-font-sizes: (
  null  : (15px, 1.3),
  small : 16px,
  medium: (17px, 1.4),
  900px : 18px,
  large : (19px, 1.45),
  1440px: 20px,
);

Примечание: Несмотря на то, значения линии высоты может быть определена с помощью любого Valid CSS блок (проценты, пиксели, EMS, и т.д.), “безразмерный” значения recommended 7 и preferred 8 для того, чтобы избежать неожиданных результатов из-за наследства .

Мы тогда должны изменить подмешать включить высоту строки при генерации CSS .

@mixin fon ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.