<!-- Showcasing how we can interpolate between any two values over a set of breakpoints-->
<!-- From $small: Blue goes from 20px padding to 100px padding and stops at $large -->
<!-- From $small: Black goes from 100px height to 20px height and stops $large -->

<div class="Container">
  <div class="Element"></div>
</div>

/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
 
@function between($to, $from, $toWidth, $fromWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;

  @return calc(#{$base} + #{100vw * $slope});
}

$small: 400px; 
$large: 1000px;

/**
 * Mixin to apply base and media queried values 
 * for the between @function.
 * Defaults to/from: $small/$large, but can be overridden.
 */

@mixin between($property, $to, $from, $toWidth: $small, $fromWidth: $large) {
  #{$property}: $to;

  @media (min-width: $toWidth) {
    #{$property}: between($to, $from, $small, $large);
  }

  @media (min-width: $fromWidth) {
    #{$property}: $from;
  }

}

* {
  box-sizing: inherit;
}

html, body {
  box-sizing: border-box;
}

.Container {
  align-items: center;
  background-color: #0087be;
  border: 10px solid #f25292;
  display: flex;
  @include between(padding, 20px, 100px);
}

.Element {
  background-color: #252A34;
  border-radius: 3px;
  width: 100%;
  @include between(height, 100px, 20px);
}