CSS calc(),具有多个单元的倍数乘法

时间:2018-08-28 15:39:26

标签: css variables sass mixins calc

我的sass代码中包含以下mixin,以获取可自动调整大小的字体大小:

value.indexOf(...)

我定义了一些变量来保持其清洁:

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

最后我在h1标​​题上将此混音称为:

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

由于我没有语法错误,因此不会出现我想要的样子。我读了一些有关calc的文章,有些人说calc在计算这类事情方面并没有得到改善。我简直不敢相信,因为我从演示文稿(https://youtu.be/Wb5xDcUNq48?t=1085)中获得了确切的语法

非常感谢您的帮助和麻烦。

MS

1 个答案:

答案 0 :(得分:0)

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;

谢谢大家!