SCSS class for responsive and fluidly-resizing text

responsive-text.scss

// smallest font size:
$font-size: 100%;
// minimum width before resizing rules apply:
$min-width: 340px;
// the range in width to create the resizing steps:
$range: 600px;
// number of resizing steps to make (more steps yields more fluid resizing):
$steps: 10;
// calculate the width of each step:
$step-size: $range / $steps;

.responsive-text {
  $i: 0;
  @while $i <= $steps {
    @media only screen and (min-width : $min-width + ($i * $step-size)) {
      // increase font size by 2% each step:
      font-size: $font-size * (1 + (.02 * $i));
    }
    $i: $i + 1;
  }
  @media only screen and (max-width: $min-width) {
    // for screens smaller than $min-width:
    font-size: $font-size;
  }
}

html {
  @extend.responsive-text
}