Generated by SassMeister.com.

input.scss

@mixin clamp($prop, $min, $max, $multi: 100vw) {
   @supports ($prop: clamp(0, 0, 0)) {
      #{$prop}: clamp(#{$min}, #{$multi}, #{$max});
   }

   @supports not ($prop: clamp(0, 0, 0)) {
      #{$prop}: $min;

      @media (min-width: 48em) {
         #{$prop}: $multi;
      }

      @media (min-width: 72em) {
         #{$prop}: $max;
      }
   }
}

html {
    --family: -apple-system, Roboto, sans-serif;
    --h1: 3rem / 1.3 var(--family);
    --h2: 2.5rem / 1.3 var(--family);
    --h3: 2.25rem / 1.3 var(--family);
    @include clamp(font, 2rem, 3rem);
}

output.css

html {
  --family: -apple-system, Roboto, sans-serif;
  --h1: 3rem / 1.3 var(--family);
  --h2: 2.5rem / 1.3 var(--family);
  --h3: 2.25rem / 1.3 var(--family);
}
@supports (font: clamp(0, 0, 0)) {
  html {
    font: clamp(2rem, 100vw, 3rem);
  }
}
@supports not (font: clamp(0, 0, 0)) {
  html {
    font: 2rem;
  }
  @media (min-width: 48em) {
    html {
      font: 100vw;
    }
  }
  @media (min-width: 72em) {
    html {
      font: 3rem;
    }
  }
}

settings.json

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