css - 响应文本的计算是无效属性

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

}

它应该给我一个工作代码，根据视口(viewport)的大小将字体大小限制在 16px 到 40px 之间。

然而收到的CSS:

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

没有像假设的那样工作:

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

有什么绝妙的点子吗？

Answer 1

如果我没记错的话，CSS 的 calc()部门必须有一个 <number>在右侧。因此，基于单位的值不能像这样用于除法。

MDN对此有很好的文档。