My calc() to calculate a font-size using a combination of vw and integers is not resolving

Question

A fairly simple font-size calc() is not rendering

The actual code is:

font-size: calc((${minSize} + ${fontSizeDifference}) * ((100vw - ${minScreenSize}) / ${screenSizeDifference}));

This is attempting to be rendered within the css as:

font-size: calc((12 + 4) * ((100vw - 375) / 825)); (except with a strikethrough)

I've tried adding/removing 'px' after each value and the calc itself, as well as reformatting/removing brackets and the vw value.

I'd expect the calc to modify the font size, but it is showing an 'Invalid property value' error

Answer 1

Should be 375px. Because 375 needs to know which format it is based on.

.a {
  font-size: calc((12 + 4) * ((100vw - 375px) / 825));
}

.b {
  font-size: calc((12 + 4) * ((100vw - 1px) / 825));
}

<div class="a">Text</div>
<div class="b">Text</div>