React mixing units error: Can't calculate vw and px together in css calc() function

Question

I want to make my font size fluid using css calc() in React but it keeps throwing error when I mix units vw and px.

font-size: calc(14px + (26px - 14px)) * ((100vw - 300px) / (1600 - 300));

Got an error and SASS can't compile 100vw - 300px.

What is the best way to fix this?

SASS can't compile `100vw` though, it must just pass it through. `100vw` is a value that _cannot_ be known at compile time. — Alex Wayne, Jan 10 '20 at 19:09

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

In a CSS calc, the multiply or divide operators must have a unitless number as one of the operands.

The MDN Docs say:

* Multiplication. At least one of the arguments must be a <number>.

/ Division. The right-hand side must be a <number>.

Your multiplication violates this rule. Simplified it's this:

calc(26px * (100vw - 300px) / 1300);

This is illegal because neither 26px or (100vw - 300px) are unitless numbers.

You also have an extra close parentheses after 14px) that makes this a syntax error as you have written it in your question.

score 0 · Answer 2 · answered Jan 10 '20 at 18:51

0

Well it would help if you told us what the error was, but you could try:

("100vw - 300px")

See more here Is it possible to use vh minus pixels in a CSS calc()?

answered Jan 10 '20 at 18:51

alex067

3,159
1
11
17

score 0 · Answer 3 · answered Jan 05 '22 at 15:31

Maybe using css custom property (css-variable) might work for you:

Woking with a css-variable kind of hides the value and its unit(works at least for attributes like width or height). Or wrap again everything in a calc.

section {
   --viewWidth: 100vw;
   font-size: calc(14px + (26px - 14px)) * ((var(--viewWidth) - 300px) / (1600 - 300));
}

React mixing units error: Can't calculate vw and px together in css calc() function

3 Answers3