responsive font in specific viewport sizes

font-responsive.scss

@mixin font-resposive($font-from, $font-to, $media-from, $media-to) {
  @media screen and (max-width: $media-from) {
    font-size: $font-from + 0px;
    &:before { content: $font-from + ''; }
  }

  $iteration-count: $font-to - $font-from;
  $divider: ($media-to - $media-from) / $iteration-count;
  
  @for $i from 0 through $iteration-count {
    @media screen and (min-width: ($media-from + ($divider * $i))) {
      font-size: $font-from + $i + 0px;
      &:before { content: $font-from + $i + ''; }
    }
  }
}