A fluid typography + responsive typography fallback on SASS

01-clamp-mixin.scss

@mixin clamp-calc (
	$property,
	$min-size,
	$max-size,
	$min-screen-width: 320px,
	$max-screen-width: 1280px
) {
	$min-screen-width-rem: $min-screen-width / 16px * 1rem;
	$max-screen-width-rem: $max-screen-width / 16px * 1rem;
	
	$factor: 1 / ($max-screen-width-rem - $min-screen-width-rem) * ($max-size - $min-size);
	$calc-value: unquote("#{$min-size - ($min-screen-width-rem * $factor)} + #{100vw * $factor}");
	#{$property}: $min-size;
	#{$property}: clamp( $min-size, $calc-value, $max-size );
}

02-clamp-mixin-example.scss

html {
  @include clamp-calc(font-size, 1rem, 2rem);
}

/*
Output:

html {
  font-size: 1rem;
  font-size: clamp(1rem, 0.6666666667rem + 1.6666666667vw, 2rem);
}
*/

03-responsive-function.scss

@function calc-responsive (
	$min-size,
	$max-size,
	$current-screen-width,
	$min-screen-width:320px,
	$max-screen-width: 1280px
) {
	@if $current-screen-width == $max-screen-width {
		@return $max-size;
	}
	
	@return ($current-screen-width - $min-screen-width) / ($max-screen-width - $min-screen-width) * ($max-size - $min-size) + $min-size;
}

04-responsive-function-example.scss

@supports not (font-size: clamp(1,1,1)) {
	@media (min-width: 768px) {
		html {
			font-size: calc-responsive(1rem, 2rem, 768px);
		}
	}
	
	@media (min-width: 1024px) {
		html {
			font-size: calc-responsive(1rem, 2rem, 1024px);
		}
	}
	
	@media (min-width: 1280px) {
		html {
			font-size: calc-responsive(1rem, 2rem, 1280px);
		}
	}
}

/*
Output:

@supports not (font-size: clamp(1, 1, 1)) {
	@media (min-width: 768px) {
		html {
			font-size: 1.4666666667rem;
		}
	}
	
	@media (min-width: 1024px) {
		html {
			font-size: 1.7333333333rem;
		}
	}
	
	@media (min-width: 1280px) {
		html {
			font-size: 2rem;
		}
	}
}
*/