calc.scss

@function linear-calc($min, $max, $depend-expr, $depend-min, $depend-max) {
	$range: $max - $min;
	$grow-rate: $range / ($depend-max - $depend-min);

	@return calc(
		#{$min} + (#{$depend-expr} - #{$depend-min}) * #{$grow-rate}
	);
}

$min-header-height: 40px;
$max-header-height: 80px;

@at-root :root {
	// js onScroll 變更
	--header-height: #{$max-header-height};
}

@function depend-on-header-height($min, $max) {
	@return linear-calc(
		$min: $min,
		$max: $max,
		$depend-expr: var(--header-height),
		$depend-min: $min-header-height,
		$depend-max: $max-header-height
	);
}