Funktionsweise: h1 { font-size: create-clamp(40px, 20px); }

Clamp-Funktion in SCSS.scss

/* #region Clamp Function for Responsive Typography */
$clamp-view-min: 400;
$clamp-view-max: 1100;
$clamp-default-unit: rem;
$clamp-base-font-size: 16; // Base font size in px for rem conversion

@function strip-units($value) {
	@if unitless($value) {
		@return $value;
	}
	@return $value / ($value * 0 + 1);
}

@function px-to-rem($px-value) {
	@return strip-units($px-value) / $clamp-base-font-size;
}

@function create-clamp($max, $min, $for-font-size: true) {
	$unit: $clamp-default-unit;
	$value-min: strip-units($min);
	$value-max: strip-units($max);
	$viewport-min: $clamp-view-min;
	$viewport-max: $clamp-view-max;
	
	// Force rem units for font-sizes and convert px to rem if needed
	@if $for-font-size {
		$unit: rem;
		
		// Convert px values to rem
		@if unit($min) == 'px' {
			$value-min: px-to-rem($min);
		}
		@if unit($max) == 'px' {
			$value-max: px-to-rem($max);
		}
		
		// Convert viewport values to rem for consistent units
		$viewport-min: $clamp-view-min / $clamp-base-font-size;
		$viewport-max: $clamp-view-max / $clamp-base-font-size;
	} @else {
		// Use original unit detection for non-font-size values
		$unit: if(unit($min) != "", unit($min), if(unit($max) != "", unit($max), $clamp-default-unit));
	}
	
	$slope: ($value-max - $value-min) / ($viewport-max - $viewport-min);
	$intercept: $value-min - $slope * $viewport-min;

	@return clamp(#{$value-min}#{$unit}, #{$intercept}#{$unit} + #{$slope * 100}vw, #{$value-max}#{$unit});
}
/* #endregion Clamp Function for Responsive Typography */