<h1>Responsive Text Mixin</h1>
<div class="texter">Alright, this next test may involve trace amounts of time travel. So, word of advice: If you meet yourself on the testing track, don't make eye contact. Lab boys tell me that'll wipe out time. Entirely. Forward and backward! So do both of yourselves a favor and just let that handsome devil go about his business.</cav9><br><br> <b>-Cave Johnson</b></div>
body{  font-family: sans-serif;background: linear-gradient(to top, #1E113A, purple); background-repeat: no-repeat; height: 100vh; color: #fff; padding: 2em; overflow-y: hidden; text-shadow: 0 1px 1px #000;}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}
// Responsive text mixin
@mixin responsiveText ($minSize: $font-size, $maxSize: 28px, $minWidth: 420px, $maxWidth: 980px) {


$mxS: strip-unit($maxSize);
$mnS: strip-unit($minSize);
$mxW: strip-unit($maxWidth);
$mnW: strip-unit($minWidth);

  font-size: calc( #{$minSize} + (#{$mxS} - #{$mnS}) * (100vw - #{$minWidth}) / (#{$mxW} - #{$mnW}));
  
  @media screen and (max-width: $minWidth ){
      font-size: $minSize;
  }
  
  @media screen and (min-width: $maxWidth ){
      font-size: $maxSize;
  }

}

h1 {
  @include responsiveText(24px, 72px);
}

.texter {
  @include responsiveText(12px, 50px);
  max-width: 980px;
  margin:auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.