css - Calc for responsive text is an invalid property -


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

which suppose give me working code limits font-size 16px 40px depending on size of viewport.

however received css:

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

is not working suppose:

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

any briliant ideas guys?

if recall correctly, css's calc() division must have <number> on right side. reason unit based values cannot used in division this.

mdn has great documentation on this.


Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -