Задача: начиная с ширины экрана N вплоть до M менять размер шрифта с X по Y.
Решение: mixin для sass ))

/**
 * Плавное изменение значения свойства между двумя брекпойнтами
 */
@mixin adaptive-property($property, $min-value, $max-value, $min-break-point, $max-break-point) {
	$min-value-unitless: $min-value / ($min-value * 0 + 1);
	$max-value-unitless: $max-value / ($max-value * 0 + 1);
	$min-break-point-unitless: $min-break-point / ($min-break-point * 0 + 1);
	$max-break-point-unitless: $max-break-point / ($max-break-point * 0 + 1);

	& {
		#{$property}: $min-value;
	}

	@media screen and (min-width: $min-break-point) {
		$diff-value: $max-value-unitless - $min-value-unitless;
		$diff-media: $max-break-point-unitless - $min-break-point-unitless;
		$coefficient: $diff-value / $diff-media;
		#{$property}: calc(#{$min-value} + (100vw - #{$min-break-point}) * #{$coefficient});
	}

	@media screen and (min-width: $max-break-point) {
		#{$property}: $max-value;
	}
}

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

Например, для экрана 320px и меньше нужен размер шрифта 10px, для экрана 1024px и больше нужен размер шрифта 16px, и между этими двумя размерами экрана шрифт плавно меняется с 10 по 16px.

.some-selector {
	@include adaptive-property("font-size", 10px, 14px, 320px, 1024px);
}

Как понятно из названия миксина, его можно использовать не только для font-size. Например, между экранами 640px и 1280px плавно меняем padding с 10px по 40px:

.some-selector {
	@include adaptive-property("padding", 10px, 40px, 640px, 1280px);
}