use-fluid-prop

Устанавливает равномерное масштабирование переданного свойства в указанных пределах в зависимости от ширины экрана. См. https://www.madebymike.com.au/writing/fluid-type-calc-examples/.

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

Параметры

Имя	Тип	По умолчанию	Описание
$property *	`string`	—	Имя свойства.
$start *	`list`	—	Список, содержащий начальные значения ширины экрана и переданного свойства.
$end *	`list`	—	Список, содержащий конечные значения ширины экрана и переданного свойства.
$set-start	`bool`	`true`	Необходимо ли использовать начальное значение свойства как "По умолчанию" для меньших размеров экрана.

Пример использования

@use 'more-sass' as more;

.element {
    @include more.use-fluid-prop('margin-bottom', (320px, 20px), (1280px, 60px));
}

.element {
    margin-bottom: 20px;
}

@media (min-width: 320px) {
    .element {
        margin-bottom: calc(20px + 40 * (100vw - 320px) / 960);
    }
}

@media (min-width: 1280px) {
    .element {
        margin-bottom: 60px;
    }
}

Пример использования в качестве миксина высшего порядка

// setup.scss
@use 'more-sass' as more;

@mixin fluid-prop($property, $min, $max) {
  @include more.use-fluid-prop($property, (320px, $min), (1280px, $max));
}

// Other files
.element {
    @include fluid-prop('margin-bottom', 20px, 60px);
}

.element {
    margin-bottom: 20px;
}

@media (min-width: 320px) {
    .element {
        margin-bottom: calc(20px + 40 * (100vw - 320px) / 960);
    }
}

@media (min-width: 1280px) {
    .element {
        margin-bottom: 60px;
    }
}