Миксины
use-fluid-font
Устанавливает равномерное масштабирование свойств шрифта (font-size и line-height) в указанных пределах в зависимости от ширины экрана.
Сокращённый вариант одновременного использования use-fluid-prop('font-size') и use-fluid-prop('line-height').
Рекомендуется использовать как миксин высшего порядка для задания проектных умолчаний с целью уменьшения шаблонного кода.
Параметры
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $start * | list | — | Список, содержащий начальные значения ширины экрана и свойств шрифта. |
| $end * | list | — | Список, содержащий конечные значения ширины экрана и свойств шрифта. |
Свойства шрифта передаются в виде строки, содержащей значения
font-size и line-height, разделённые слэшем (/),
как и в стандартном свойстве font: 14px/1.6.
Также можно установить только значение font-size (14px) или только line-height (/1.6).Пример использования
@use 'more-sass' as more;
.element {
@include more.use-fluid-font((320px, '14px/1.5'), (1280px, '20px/1.4'));
}
.element {
font-size: clamp(14px, calc(14px + 6 * (100vi - 320px) / 960), 20px);
line-height: clamp(21px, calc(21px + 7 * (100vi - 320px) / 960), 28px);
}
Пример использования в качестве миксина высшего порядка
// setup.scss
@use 'more-sass' as more;
@mixin fluid-font($min, $max) {
@include more.use-fluid-font((320px, $min), (1280px, $max));
}
// Other files
.element {
@include fluid-font('14px/1.5', '20px/1.4');
}
.element {
font-size: clamp(14px, calc(14px + 6 * (100vi - 320px) / 960), 20px);
line-height: clamp(21px, calc(21px + 7 * (100vi - 320px) / 960), 28px);
}