Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

// forked from http://www.sassmeister.com/gist/7f22e44ace49b5124eec

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  http://madebymike.com.au/writing/precise-control-responsive-typography/
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  24.10.2016 @phlppschrr: Better calc-compatibility (Android Browser 4.4 is lacking the ability to multiply and divide values)
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================

@mixin fluid-type($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 {
      $factor: strip-unit($max-value - $min-value) / strip-unit($max-vw - $min-vw);
      $a: $factor * 100vw;
      $b: $min-value - $factor * $min-vw;
      #{$property}: calc(#{$a} + #{$b});
    }
  }

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

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

/* Single property */
html {
  @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
}

/* Multiple properties with same values */
h1 {
  @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
}

SassMeister-output.css

/* Single property */
html {
  font-size: 14px;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(0.38241vw + 12.77629px);
  }
}

@media screen and (min-width: 1366px) {
  html {
    font-size: 18px;
  }
}

/* Multiple properties with same values */
h1 {
  padding-bottom: 2em;
  padding-top: 2em;
}

@media screen and (min-width: 20em) {
  h1 {
    padding-bottom: calc(4vw + 1.2em);
    padding-top: calc(4vw + 1.2em);
  }
}

@media screen and (min-width: 70em) {
  h1 {
    padding-bottom: 4em;
    padding-top: 4em;
  }
}