Fluid Mixn

sass

//
// A mixin to scale any property based on the current viewport with
// min and max values.
// +fluid(font-size, 300px, 500px, 12px, 30px)
// +fluid(padding-left, 200px, 600px, 14px, 40px)
// +fluid(height, 200px, 600px, 140px, 400px)
//
@function strip-unit($value)
  @return $value / ($value * 0 + 1)

@mixin fluid($properties, $min-vw, $max-vw, $min-value, $max-value)
  @each $property in $properties
    #{$property}: $min-value

  @media screen and (min-width: $min-vw)
    @each $property in $properties
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})

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

@mixin fluid-vh($properties, $min-vh, $max-vh, $min-value, $max-value)
  @each $property in $properties
    #{$property}: $min-value

  @media screen and (min-height: $min-vh)
    @each $property in $properties
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vh - #{$min-vh}) / #{strip-unit($max-vh - $min-vh)})

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