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(max(#{$min}, #{$multi}), #{$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(--h1, 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 (--h1: clamp(0, 0, 0)) {
  html {
    --h1: clamp(2rem, 100vw, 3rem);
  }
}
@supports not (--h1: clamp(0, 0, 0)) {
  html {
    --h1: min(max(2rem, 100vw), 3rem);
  }
}

settings.json

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