<section class="box interpolate">
  <h1 class="title">Hello CSS clamp()</h1>
  <h2 class="subtitle">Responsive viewport function</h2>
</section>
<section class="box clamp">
  <h1 class="title">Hello interpolate</h1>
  <h2 class="subtitle">Responsive viewport SCSS mixin</h2>
</section>
* {
  box-sizing: border-box;
}
h1, h2 {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: 400;
}
html,
body {
  height: 100vh;
}

body {
  font-family: 'Barlow', sans-serif;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
}
.box {
  background-color: tomato;
  color: #fff;
  margin: 1em;
}


@mixin interpolate($properties, $min-screen, $max-screen, $min-value, $max-value) {
	& {
		@each $property in $properties {
			#{$property}: $min-value;
		}

		@media screen and (min-width: $min-screen) {
			@each $property in $properties {
				#{$property}: calc-interpolation($min-screen, $min-value, $max-screen, $max-value); 
			}
		}

		@media screen and (min-width: $max-screen) {
			@each $property in $properties {
				#{$property}: $max-value;
			}
		}
	}
}

@function calc-interpolation($min-screen, $min-value, $max-screen, $max-value) {
	$a: ($max-value - $min-value) / ($max-screen - $min-screen);
	$b: $min-value - $a * $min-screen; 

	$sign: "+";
	@if ($b < 0) {
		$sign: "-";
		$b: abs($b);
	}
	@return calc(#{$a*100}vw #{$sign} #{$b});
}

// aqui empieza el uso de la función interpolate(...)
.interpolate {
  &.box {
    @include interpolate((padding-top, padding-bottom), 575px, 1024px, 20px, 40px);
    @include interpolate((padding-left, padding-right), 575px, 1024px, 24px, 80px);
    //Tambien se puede definir así  -cuando todas sus direcciones son iguales- :
    //@include interpolate(padding, 575px, 1024px, 32px, 100px);
    .title {
      @include interpolate(font-size, 575px, 1024px, 24px, 60px);
      @include interpolate(margin-bottom, 575px, 1024px, 20px, 40px);
    }
    .subtitle {
      @include interpolate(font-size, 575px, 1024px, 18px, 30px);
    }
  }
}

// aqui empieza el uso de la función clamp()
.clamp {
  &.box {
    padding:
      clamp(20px, calc(4.4543429844vw - 5.6124721604px), 40px)
      clamp(24px, calc(12.4721603563vw - 47.714922049px), 80px);
    .title {
      font-size: clamp(24px, calc(8.0178173719vw - 22.1024498886px), 60px);
      margin-bottom: clamp(20px, calc(4.4543429844vw - 5.6124721604px), 40px)
    }
    .subtitle {
      font-size: clamp(18px, calc(2.6726057906vw + 2.6325167038px), 30px);
    }
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.