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);
}

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);
}

settings.json

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