Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use calc() with function inside?

Tags:

css

sass

Is there any way to do the following in a single line?

--widthA: get-vw(20px);
font-size: calc(5px + var(--widthA));

Since I need to set a minimum font-size. The get-vw function will calculate 20px in vw and I need to add 5px on top of that.

like image 447
Night5talker Avatar asked Apr 15 '26 19:04

Night5talker


1 Answers

Yes, you can write this in one line (without variable) using interpolation (#{...}):

font-size: calc(5px + #{get-vw(20px)});

demo (with example function): https://jsfiddle.net/wccoLefp/

Sass allows any text in these function calls, including nested parentheses. Nothing is interpreted as a SassScript expression, with the exception that interpolation can be used to inject dynamic values.
Sass: Special Functions

like image 172
Sebastian Brosch Avatar answered Apr 22 '26 17:04

Sebastian Brosch



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!