CSS calc () с мультипликацией с несколькими единицами

Question

У меня есть следующий миксин в моем коде sass, чтобы получить размер шрифта с отзывчивым самоизменением:

@mixin fluid-text($min-screenwidth, $max-screenwidth, $min-fontsize, $max-fontsize){
    font-size: calc( (#{$min-fontsize}) +
    (#{$max-fontsize} - #{$min-fontsize}) * 
    (100vw - #{$min-screenwidth}) / 
    (#{$max-screenwidth} - #{$min-screenwidth}));
}

Я определил некоторые переменные, чтобы сохранить его в чистоте:

//text variables
$min-screenwidth: 480px;
$max-screenwidth: 1260px;
//heading
$min-landingheading-fontsize: 42px;
$max-landingheading-fontsize: 65px;

и, наконец, я назвал этот миксин в заголовке h1:

@include fluid-text($min-screenwidth, $max-screenwidth, $min-landingheading-fontsize, $max-landingheading-fontsize);

Поскольку у меня нет синтаксической ошибки, она не будет отображаться так, как я хочу. Я читал некоторые статьи о calc, и некоторые говорили, что калькулятор не настолько хорош, чтобы вычислять подобные вещи. Я не могу в это поверить, так как я получил этот точный синтаксис из презентации (https://youtu.be/Wb5xDcUNq48?t=1085)

Спасибо заранее за вашу помощь и проблемы.

MS

Answer 1

font-size: calc( (#{$min-fontsize}px) + (#{$max-fontsize} - #{$min-fontsize}) * (100vw - #{$min-screenwidth}px) / (#{$max-screenwidth} - #{$min-screenwidth}));

//text variables
$min-screenwidth: 480;
$max-screenwidth: 1260;
//heading
$min-landingheading-fontsize: 42;
$max-landingheading-fontsize: 65;

чем сотворит волшебство, спасибо всем!