Generated by SassMeister.com.

input.scss

$fs-base-font-size: 16px !default;

@function fs-em($values, $context: $fs-base-font-size) {

  // Ensure context size is in pixels
  @if unit($context) != 'px' {
    @error '🔴  #{$context} size must be in pixels';
  }

  // Placeholder list for converted values
  $output: ();

  @each $val in $values {
    // Check if pixel value
    @if type-of($val) == 'number' and unit($val) == 'px' {
      // Convert to ems
      $val: ($val / $context) * 1em;
    }

    // Do nothing to all other values
    @else if $fs-debug-mode {
      @warn '⚠️  Can’t convert non-pixel value to ems: #{$val}';
    }

    // Append value to output list
    $output: append($output, $val);
  }

  // Return converted value(s)
  @return $output;
}

@function fs-rem($values) {

  // Placeholder list for converted values
  $output: ();

  @each $val in $values {

    // Check if pixel value
    @if type-of($val) == 'number' and unit($val) == 'px' {
      // Convert to rems
      $val: ($val / $fs-base-font-size) * 1rem;
    }

    // Do nothing to all other values
    @else if $fs-debug-mode and $val != 0 {
      @warn '⚠️  Can’t convert non-pixel value to rems: #{$val}';
    }

    // Append value to output list
    $output: append($output, $val);
  }

  // Return converted value(s)
  @return $output;
}

@mixin fs-media($conditions) {

  // Check if $conditions is a valid map
  @if type-of($conditions) != 'map' {
    @error '🔴 “#{$conditions}” is not a valid Sass map';
  }
  @else {
    $mq-conditions: '';

    // Convert map to properly formatted media query string
    @each $type, $value in $conditions {

      // Use str-insert() with -1 index to append value to the end
      $mq-conditions: str-insert($mq-conditions, 'and (#{$type}: #{$value}) ', -1);
    }

    // Output the media query
    @media all #{$mq-conditions} {
      @content;
    }
  }
}

@mixin fs-min-width($width) {
  @include fs-media((min-width: $width)) {
    @content;
  }
}

@mixin fs-max-width($width) {
  @include fs-media((max-width: $width)) {
    @content;
  }
}

@mixin fs-min-height($height) {
  @include fs-media((min-height: $height)) {
    @content;
  }
}

@mixin fs-max-height($height) {
  @include fs-media((max-height: $height)) {
    @content;
  }
}

@function fs-scale($start, $end, $min-width, $max-width, $units: 'rem') {
  @if $start > 0 and $end > 0 and unit($start) != unit($end) {
    @error '🔴  fs-scale() units don’t match';
  }

  $slope: ($end - $start) / ($max-width - $min-width);

  $intercept: $end - ($slope * $max-width);

  @if (fs-strip-unit($intercept) == 0) {
    @return $slope * 100vw;
  }
  @else {
    @if $units == 'em' {
      @return calc(#{$slope * 100vw} + #{$intercept});
    }
    @else {
      @return calc(#{$slope * 100vw} + #{$intercept});
    }
  }
}

@mixin fs-scale-poly($properties, $map, $initial: true, $units: 'rem') {
  $length: length($map);

  @if ($length < 2) {
    @error "fs-scale() requires at least two breakpoints";
  }

  $breakpoints: map-keys($map);
  $values: map-values($map);

  // Initial value
  $start-val: nth($values, 1);

  @if $initial {
    @each $property in $properties {
      @if $units == 'em' {
        #{$property}: fs-em($start-val);
      }
      @else {
        content: $start-val;
        #{$property}: $start-val;
      }
    }
  }

  // Scale up with calc() at each breakpoint
  @for $i from 1 through ($length - 1) {
    $start-breakpoint: nth($breakpoints, $i);
    $end-breakpoint: nth($breakpoints, $i + 1);
    $start-value: nth($values, $i);
    $end-value: nth($values, $i + 1);
    
    
    @if length($start-value) > 2 {
      @warn "fs-scale(): #{$start-value} list contains too many values, only the first two will be used";
    }
    
    @if length($end-value) > 2 {
      @warn "fs-scale(): #{$start-value} list contains too many values, only the first two will be used";
    }
    
    // If multiple start values, use the second
    // (the first value was the ending value in the previous media query)
    @if length($start-value) > 1 {
      // If multiple end values, use the first
      $new-end-value: if(length($end-value) > 1, nth($end-value, 1), $end-value);
      
      @include fs-min-width($start-breakpoint) {
        @each $property in $properties {
          content: "Start: #{nth($start-value, 2)}, End: #{$new-end-value}";
          #{$property}: fs-scale(nth($start-value, 2), $new-end-value, $start-breakpoint, $end-breakpoint, $units);
        }
      }
    }
     
    // If muliple ending values, use the first 
    @else if length($end-value) > 1 {
      @include fs-min-width($start-breakpoint) {
        @each $property in $properties {
          content: "Start: #{$start-value}, End: #{nth($end-value, 1)}";
          #{$property}: fs-scale($start-value, nth($end-value, 1), $start-breakpoint, $end-breakpoint, $units);
        }
      }
    }
    
    // Single values
    @else {
      @include fs-min-width($start-breakpoint) {
        @each $property in $properties {
          content: "Start: #{$start-value}, End: #{$end-value}";
          #{$property}: fs-scale($start-value, $end-value, $start-breakpoint, $end-breakpoint, $units);
        }
      }
    }
    
  }

  // Final value
  $end-val: nth($values, $length);
  $end-breakpoint: nth($breakpoints, $length);

  @include fs-min-width($end-breakpoint) {
    @each $property in $properties {
      @if $units == 'em' {
        #{$property}: fs-em($end-val);
      }
      @else {
        #{$property}: fs-rem($end-val);
      }
    }
  }
}

@mixin fs-scale-legacy($properties, $start, $end, $min-width, $max-width, $fallback: true, $units: 'rem') {
    @warn 'Upgrade fs-scale() to new map syntax, fs-scale(#{$properties}, (#{$min-width}: #{$start}, #{$max-width}: #{$end}))';
  // Starting size
  @if $fallback {
    @each $property in $properties {
      @if $units == 'em' {
        #{$property}: $start;
      }
      @else {
        #{$property}: $start;
      }
    }
  }

  // Scale up with calc()
  @include fs-min-width($min-width) {
    @each $property in $properties {
      #{$property}: fs-scale($start, $end, $min-width, $max-width, $units);
    }
  }

  // Final size
  @include fs-min-width($max-width) {
    @each $property in $properties {
      @if $units == 'em' {
        #{$property}: $end;
      }
      @else {
        #{$property}: $end;
      }
    }
  }
}

@mixin fs-scale($args...) {
  @if length($args) > 1 and type-of(nth($args, 2)) == 'map' {
    @include fs-scale-poly($args...);    
  }
  @else {
    @include fs-scale-legacy($args...);    
  }
}

.new-2-bp {
  @include fs-scale(font-size, (360px: 24px, 800px: 32px));
}

.new-3-bp {
  @include fs-scale(font-size, (360px: 24px, 800px: 32px, 1200px: 48px));
}

.new-4-bp {
  @include fs-scale(font-size, (360px: 24px, 800px: (32px 24px), 1200px: 32px));
}

.new-5-bp {
  @include fs-scale(font-size, (360px: 24px, 800px: (32px 24px), 1000px: (32px 24px), 1200px: 32px));
}

.new-ems {
  @include fs-scale(font-size, (360px: 24px, 800px: 32px), $units: "em");
}

.new-initial-false {
  @include fs-scale(font-size, (576px: 22px, 768px: 24px), $initial: false);
}

.old {
  @include fs-scale(font-size, 22px, 24px, 576px, 768px);
  @include fs-scale(font-size, 24px, 34px, 768px, 992px, $fallback: false);
}

.old-ems {
  @include fs-scale(font-size, 22px, 24px, 576px, 768px, $units: "em");
}

output.css

.new-2-bp {
  content: 24px;
  font-size: 24px;
}
@media all and (min-width: 360px) {
  .new-2-bp {
    content: "Start: 24px, End: 32px";
    font-size: calc(1.8181818182vw + 17.4545454545px);
  }
}
@media all and (min-width: 800px) {
  .new-2-bp {
    font-size: 2rem;
  }
}

.new-3-bp {
  content: 24px;
  font-size: 24px;
}
@media all and (min-width: 360px) {
  .new-3-bp {
    content: "Start: 24px, End: 32px";
    font-size: calc(1.8181818182vw + 17.4545454545px);
  }
}
@media all and (min-width: 800px) {
  .new-3-bp {
    content: "Start: 32px, End: 48px";
    font-size: calc(4vw + 0px);
  }
}
@media all and (min-width: 1200px) {
  .new-3-bp {
    font-size: 3rem;
  }
}

.new-4-bp {
  content: 24px;
  font-size: 24px;
}
@media all and (min-width: 360px) {
  .new-4-bp {
    content: "Start: 24px, End: 32px";
    font-size: calc(1.8181818182vw + 17.4545454545px);
  }
}
@media all and (min-width: 800px) {
  .new-4-bp {
    content: "Start: 24px, End: 32px";
    font-size: calc(2vw + 8px);
  }
}
@media all and (min-width: 1200px) {
  .new-4-bp {
    font-size: 2rem;
  }
}

.new-5-bp {
  content: 24px;
  font-size: 24px;
}
@media all and (min-width: 360px) {
  .new-5-bp {
    content: "Start: 24px, End: 32px";
    font-size: calc(1.8181818182vw + 17.4545454545px);
  }
}
@media all and (min-width: 800px) {
  .new-5-bp {
    content: "Start: 24px, End: 32px";
    font-size: calc(4vw + -8px);
  }
}
@media all and (min-width: 1000px) {
  .new-5-bp {
    content: "Start: 24px, End: 32px";
    font-size: calc(4vw + -16px);
  }
}
@media all and (min-width: 1200px) {
  .new-5-bp {
    font-size: 2rem;
  }
}

.new-ems {
  font-size: 1.5em;
}
@media all and (min-width: 360px) {
  .new-ems {
    content: "Start: 24px, End: 32px";
    font-size: calc(1.8181818182vw + 17.4545454545px);
  }
}
@media all and (min-width: 800px) {
  .new-ems {
    font-size: 2em;
  }
}

@media all and (min-width: 576px) {
  .new-initial-false {
    content: "Start: 22px, End: 24px";
    font-size: calc(1.0416666667vw + 16px);
  }
}
@media all and (min-width: 768px) {
  .new-initial-false {
    font-size: 1.5rem;
  }
}

.old {
  font-size: 22px;
}
@media all and (min-width: 576px) {
  .old {
    font-size: calc(1.0416666667vw + 16px);
  }
}
@media all and (min-width: 768px) {
  .old {
    font-size: 24px;
  }
}
@media all and (min-width: 768px) {
  .old {
    font-size: calc(4.4642857143vw + -10.2857142857px);
  }
}
@media all and (min-width: 992px) {
  .old {
    font-size: 34px;
  }
}

.old-ems {
  font-size: 22px;
}
@media all and (min-width: 576px) {
  .old-ems {
    font-size: calc(1.0416666667vw + 16px);
  }
}
@media all and (min-width: 768px) {
  .old-ems {
    font-size: 24px;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}