Useful for responsive CSS typography

_fluid-property.scss

/*
  Props:
  $property: Any CSS that accepts calc(), viewport units and pixels, ie. Most properties… height/width/padding/font-size etc.
  $min: The minimum size.
  $max: The maximum size.
  $start: $min will be used at any resolution lower than this.
  $end: $max value will be used at any resolution higher than this.
  $clip: When set to false, this disables clipping with the $start and $end properties.
  $clipAtStart: When set to false, this disables clipping with the $start property. 
  $clipAtEnd: When set to false, this disables clipping with the $end property. 
*/

@mixin fp($property, $min, $max, $start: 320, $end: 1920, $clip: true, $clipAtStart: true, $clipAtEnd: true) {
  $multiplier: ($max - $min) / ($end - $start) * 100;
  $adder: ($min * $end - $max * $start) / ($end - $start);
  $formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
  @if $clip and $clipAtStart {
    @media (max-width: #{$start + 0px}) {
      #{$property}: $min + 0px;
    }
  }
  @if $clip and $clipAtEnd {
    @media (min-width: #{$end + 0px}) {
      #{$property}: $max + 0px;
    }
  }
  #{$property}: $formula;
}