Одним из способов достижения визуальной согласованности в веб-дизайне является использование вертикального ритма . Для веб-сайта это будет означать, что независимо от font-size любого текстового элемента его line-height всегда будет кратна единообразной единице ритма. Когда это будет сделано точно, вы можете поместить полосатый фон позади своей страницы, и каждый текстовый блок (абзацы, заголовки, цитаты и т. Д.) Будет располагаться вдоль линий в этой сетке.
Как вы можете себе представить, настройка этого вручную потребует много математики и набора текста. Если вы хотите быстро изменить пропорции этой сетки, вы переделаете эту работу для каждой точки останова. Sass, как и следовало ожидать, предоставляет отличный инструментарий для автоматизации всей этой работы и более простой генерации настраиваемой шкалы типов с постоянным вертикальным ритмом.
Я начну с признания того, что уже есть несколько хороших плагинов Sass, которые помогают создавать собственные шкалы типов с постоянным вертикальным ритмом. Если вы просто хотите получить готовый фрагмент кода, попробуйте Typesetting , Typomatic или Typecsset .
Зачем строить наши собственные?
Это поднимает большой вопрос: со всеми этими инструментами, почему мы должны пытаться создавать свои собственные? Есть несколько причин. Тот факт, что есть три различных инструмента, уже означает, что есть разные способы успешно решить эту проблему. Кроме того, создание собственной шкалы шрифтов с помощью Sass — это отличный способ выйти за рамки основ и изучить более продвинутый Sass.
Прежде чем мы начнем, давайте определим, какой тип шкалы мы собираемся построить. Масштаб начинается с базового font-size и line-height . Из этого font-size он сгенерирует несколько пропорционально больших значений размера font-size . Этот код Sass также будет управлять лидированием для всех размеров, которые он генерирует, позволяя нам сохранять высоту строки привязанной к кратному базовой line-height .
Еще одна деталь для веселья: мы сможем настроить базовый font-size и line-height для различной ширины экрана с помощью небольшого смешанного медиазапроса.
Настройка переменных
Мы поместим эти переменные в верхнюю часть файла, потому что мы хотим организовать наш код, храня все «конфиг» в одном легко доступном месте.
Если мы не хотим, чтобы это было отзывчивым, это все, что нам нужно для базовых значений font-size и line-height :
$base-font-size: 16px; $base-line-height: 1.3;
Мы также будем использовать переменную для пропорции увеличения значения font-size :
$scale: 1.5;
Однако, мы собираемся сделать это адаптивным, поэтому карта Sass — лучший способ хранить эту информацию:
$bp-sizes: ( small: ( base-font-size: 16px, base-line-height: 1.3, scale: 1.25 ), medium: ( base-font-size: 18px, base-line-height: 1.4, scale: 1.4 ), large: ( base-font-size: 22px, base-line-height: 1.5, scale: 1.5 ) );
Нам также понадобится набор значений точек останова для медиа-запросов. Вы можете сделать карту $bp-sizes более сложной и добавить значение min-width . Но в этом уроке я допускаю возможность того, что у вас уже может быть плагин для точки останова, который вам нравится, поэтому мы оставим его отдельно. Просто убедитесь, что метки точек останова совпадают:
$breakpoints: ( small: 480px, medium: 960px, large: 1200px );
Через минуту мы посмотрим, как мы используем значения на этой карте. А пока давайте перейдем к последнему набору необходимых нам переменных — списку размеров шрифтов, которые мы планируем использовать.
$font-sizes: ( p, bq, ssh, sh, h, hero );
В этом случае мы используем p для абзаца, bq для цитат, ssh для подзаголовка, sh для подзаголовка, h для заголовка и hero для текста героя.
Настройка Mixins
Теперь, когда у нас есть все данные, которые нам нужны в переменных, пришло время приступить к их обработке. Чтобы получить сгенерированный CSS, который нам нужен, нам понадобится миксин, который создает свойства font-size и line-height для каждой метки в карте $font-sizes . Затем мы повторим это смешение с данными из каждой точки останова на карте $bp-sizes , обернув каждый набор стилей в соответствующие медиа-запросы.
Генерация font-size и line-height
Вот наш миксин для генерации значений font-size и line-height :
@mixin generate-font-properties($label, $base-font-size, $base-line-height, $scale) { $scale-value: index($font-sizes, $label) - 1; $fs: $base-font-size * pow($scale, $scale-value); $lh: $base-font-size * $base-line-height / $fs; @while $lh < 1 { $lh: $lh + $lh; } font-size: $fs; line-height: $lh; }
Этот миксин принимает четыре параметра: метку размера шрифта (из карты $font-sizes ), базовый размер шрифта, высоту базовой линии и масштаб (все из $bp-sizes ).
Первая строка этого миксина получает индекс метки на карте $font-sizes и вычитает ее так, чтобы сгенерированные размеры шрифта увеличивались правильно.
Примечание. Значения индекса Sass начинают счет с 1 , в отличие от большинства других языков программирования, где индекс начинается с 0.
Вторая строка устанавливает переменную $fs в текущий базовый font-size умноженный на текущий масштаб на степень индекса масштаба. Другими словами, если это первый сгенерированный размер шрифта, $fs будет базовым размером шрифта, умноженным на 1 (масштаб до степени 0). Если это второй сгенерированный размер шрифта, $fs будет базовым размером шрифта, умноженным на масштаб до первой степени.
Примечание: если вы используете Compass, pow() является вспомогательной функцией; если нет, вы можете включить функцию pow() подобную этой .
После этого $lh (который служит заполнителем для возможной высоты строки) устанавливается на базовый вертикальный ритм (размер шрифта * высота строки), деленный на текущий вычисленный размер шрифта. Это делает начальную высоту строки для любого размера шрифта идентичной базовому вертикальному ритму. Для больших размеров шрифта это измерение меньше 1. Цикл @while while увеличивает переменную $lh на одну единицу вертикального ритма за раз, пока высота строки не станет не меньше 1.
Примечание. Мы генерируем значение высоты строки без единиц измерения, чтобы мы могли использовать любые допустимые измерения размера шрифта в этом миксине. Вы можете использовать любые единицы измерения (px, rem, em, vh) на карте $bp-sizes .
Наконец, этот миксин выводит размер шрифта как значение $fs а высоту строки как значение $lh .
Генерация точек останова
Нам также понадобится миксин для генерации медиа-запросов для точек останова. Вот что я люблю использовать:
@mixin breakpoint($name) { @if not map-has-key($breakpoints, $name) { @warn "Invalid breakpoint `#{$name}`."; } @else { @if map-get($breakpoints, $name) == '' { @content; } @else { @media (min-width: map-get($breakpoints, $name)) { @content; } } } }
Этот миксин проверяет имя переданной ему точки останова по списку меток на карте $breakpoints . Если имя отсутствует, возвращается сообщение об ошибке.
Если $name находится в карте $breakpoints , следующий оператор @if ищет измерение в паре с именем. Если значение измерения отсутствует, стили компилируются без медиазапроса. Это позволяет нам установить набор значений конфигурации шрифта по умолчанию на карте $bp-sizes .
Если у $name есть измерение, оно используется как значение медиа-запроса min-width . (Да, я большой сторонник медийных запросов с мобильных устройств.) Все стили @content обернуты в этот @content .
Цикл значений и точек останова
Теперь, когда у нас есть работающий @mixin для генерации размера шрифта и высоты строки, нам нужно повторить его для всех значений в списке $font-sizes . Для этого мы будем использовать цикл @each :
@each $label in $font-sizes { %#{$label} { @include generate-font-properties($label, $base-font-size, $base-line-height, $scale); } }
Осталось сделать еще один шаг назад и обернуть этот цикл в цикл, проходящий по карте $bp-sizes . Этот цикл также будет включать наш mixin breakpoint() для генерации медиа-запросов. Чтобы получить необходимую информацию из карты $bp-sizes , этот цикл будет использовать вспомогательную функцию get-breakpoint-property() . Он ищет $bp-sizes , находит карту размера точки останова и возвращает правильное значение свойства из этой карты:
@function get-breakpoint-property($prop, $bp) { @return map-get(map-get($bp-sizes, $bp), $prop); } @each $size, $data in $bp-sizes { $bsf: get-breakpoint-property(base-font-size, $size); $blh: get-breakpoint-property(base-line-height, $size); $s: get-breakpoint-property(scale, $size); @include breakpoint($size) { @each $label in $font-sizes { #{$label} { @include generate-font-properties($label, $bsf, $blh, $s); } } } }
Затем цикл вызывает mixin breakpoint() для генерации каждого необходимого медиа-запроса. Внутри этого миксина он запускает цикл $font-sizes и регенерирует заполнители шрифтов, используя соответствующий размер шрифта, высоту строки и масштаб для текущей точки останова. Выходные данные прикрепляются к селекторам-заполнителям , которые мы затем расширяем при необходимости:
.page-title { @extend %h; }
Вы можете увидеть код в действии в этом CodePen :
Вывод
В процессе создания плагина Sass, который позволяет нам быстро генерировать нестандартные размеры шрифтов с постоянным вертикальным ритмом и адаптивными настройками, мы узнали несколько важных вещей о Sass.
Мы использовали переменные, списки и карты. Мы использовали миксины, расширения и петли. Это некоторые из наиболее важных инструментов в вашем наборе инструментов Sass. Пожалуйста, поделитесь в комментариях, как вы можете использовать этот плагин, или как вы можете использовать эти инструменты для создания других полезных стилей!