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

 * 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);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.