CSS calc() 与多个单位相乘

Question

我的 sass 代码中有以下 mixin，以获得响应式自调整字体大小:

@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 标题上称这个 mixin:

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

因为我没有语法错误，它不会像我想要的那样出现。我读了一些关于 calc 的文章，有些人说 calc 并没有改进到计算那种东西。我简直不敢相信，因为我从演示文稿 (https://youtu.be/Wb5xDcUNq48?t=1085) 中得到了准确的语法

在此先感谢您的帮助和麻烦。

女士

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;

谢谢大家!