<!-- 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>
 * 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;

* {
  box-sizing: inherit;

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

.Container {
  align-items: center;
  background-color: #0087be;
  border: 10px solid #f25292;
  display: flex;
  padding: 20px;

  @media (min-width: $small) {
    padding: between(20px, 100px, $small, $large);

  @media (min-width: $large) {
    padding: 100px;

.Element {
  background-color: #252A34;
  border-radius: 3px;
  height: 100px;
  width: 100%;
  @media (min-width: $small) {
   height: between(100px, 20px, $small, $large);

  @media (min-width: $large) {
   height: 20px;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.