CODEWITHSUNDEEP
csssass
ggoran
ggoran

Reputation: 620

How to use calc() with function inside?

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.

Upvotes: 3

Views: 843

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

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

Upvotes: 6

Related Questions