Calc для адаптивного текста является недопустимым свойством

Question

Я сделал scss

@mixin responsive_font-size($viewport-min : "320px", $viewport-max: "1320px", $font-size-min:"16px", $font-size-max:"40px") {
    font-size:calc( #{$font-size-min} + (#{$font-size-max} - #{$font-size-min}) * ( (100vw - #{$viewport-min}) / ( #{$viewport-max} - #{$viewport-min}) ));

}

который предполагает дать мне рабочий код, который ограничивает размер шрифта от 16 до 40 пикселей в зависимости от размера области просмотра.

Однако получил CSS:

calc( 16px + (40px - 16px) * ( (100vw - 320px) / ( 1320px - 320px) ))

Не работает, как предполагается:

https://jsfiddle.net/maszynka/73toqgcx/

Какие-нибудь блестящие идеи, ребята?

Answer 1

Если я правильно помню, CSS calc() деление должно иметь <number> на правой стороне. По этой причине значения, основанные на единицах, не могут использоваться при таком разделении.

MDN имеет отличную документацию по этому вопросу.

Answer 2

От MDN calc() документы:

/
Отдел. Правая сторона должна быть <number>,

Вы пытаетесь разделить число на некоторое количество пикселей. Вы должны использовать номер.

Может быть, это то, что вы пытаетесь достичь:

font-size: calc(16px + (40 - 16) * ( (100vw - 320px) / ( 1320 - 320)));