TypeClamp SCSS Mixin

input.scss

// CSS taken from: https://websemantics.uk/tools/responsive-font-calculator/

// Set up Min - Max Viewport (without px)

$viewport-min: 800;
$viewport-max: 1680;


// TypeClamp Mixin

@mixin typeclamp ($min, $max){
    
    font-size: clamp(   
                        #{$min}px, 
                        calc(1rem + (#{$max} - #{$min}) * ((100vw - #{$viewport-min}px) / (#{$viewport-max} - #{$viewport-min}))), 
                        #{$max}px);
    min-height: 0vw;    
}

// Example usage

h1{
    @include typeclamp(30, 120);
}

output.css

h1 {
  font-size: clamp( 30px, calc(1rem + (120 - 30) * ((100vw - 800px) / (1680 - 800))), 120px);
  min-height: 0vw;
}

settings.json

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