In my SASS code, I have created a mixin for responsive-self-resizing font size. Here is the code:
@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}));
}
To keep things organized, I defined some variables:
//text variables
$min-screenwidth: 480px;
$max-screenwidth: 1260px;
//heading
$min-landingheading-fontsize: 42px;
$max-landingheading-fontsize: 65px;
Finally, I apply this mixin to an h1 headline like so:
@include fluid-text($min-screenwidth, $max-screenwidth, $min-landingheading-fontsize, $max-landingheading-fontsize);Even though there are no syntax errors, the result is not as expected. I have come across articles suggesting that 'calc' may not be ideal for such calculations. However, I find it hard to believe as I based my code on a presentation (https://youtu.be/Wb5xDcUNq48?t=1085)
Thank you in advance for your assistance.
MS