Управляющий последовательным, типографская ритм не легко, но когда тип реагирует, все становится еще сложнее.К счастью, 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
Но подождите!Что делать, если мы решим, что мы хотим, чтобы размер шрифтаp S составляет 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 font-size($fs-map, $fs-breakpoints: $b ...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров