Based on https://codepen.io/jmm/pen/amGzOj, but with vunit/axis control.

CSS-Locks_Mixin.scss

// $property: the property of the element that you would like to scale/lock
// $min-size: minimum element $property size in $unit specified
// $max-size: maximum element $property size in $unit specified
// $min-width: the screen width in $units where you want to lock in the $min-size
// $max-width: the screen width in $units where you want to lock in the $max-size
// $unit: the units which all measurements are taken in
// $vunit: the viewport unit which all measurements are taken in

@mixin css-lock($property: font-size, $min-size: 1, $max-size: 1.4, $min-width: 20, $max-width: 100, $unit: px, $vunit: vw) {
  #{$property}: calc(#{$min-size}#{$unit} + (#{$max-size} - #{$min-size}) * ((100#{$vunit} - #{$min-width}#{$unit}) / (#{$max-width} - #{$min-width})));

  $axis: 'width';
  @if $vunit == 'vh' {
    $axis: 'height';
  }
  @media (max-#{$axis}: #{$min-width}#{$unit}) {
    #{$property}: #{$min-size}#{$unit};
  }

  @media (min-#{$axis}: #{$max-width}#{$unit}) {
    #{$property}: #{$max-size}#{$unit};
  }
}