_tween.scss

//
// Tween
//

// A mixin to tween pixel values between two viewport widths

//       $from: Pixel value at $start
//         $to: Pixel value at $stop
//      $start: Viewport width to start the tween
//       $stop: Viewport width to stop the tween
// $properties: List of properties

@mixin tween($from, $to, $start, $stop, $properties...) {
  $range: $stop - $start;
  $delta: $to - $from;
  $factor: $delta / $range;

  @each $property in $properties {
    @media (min-width: $start) {
      #{$property}: calc(#{$from} + (100vw - #{$start}) * #{$factor});
    }

    @media (min-width: $stop) {
      #{$property}: $to;
    }
  }
}