0

I have been struggling trying to use css max() and scss variables together. For instance, font-size: max(5vw, 991px * 0.075); works, but the following:

$lg: 991px * 0.075;
font-size: max(5vw, $lg);

or

$lg: 991px;
font-size: max(5vw, $b * 0.075);

throws "Error: Incompatible units px and vw," even though it is virtually the same as the former. And the following:

$lg: 991px;
$-lg: calc($lg * 0.075);
font-size: max(5vw, $-lg);

throws "Error: calc($b * 0.075) is not a number."

$lg: 991px;
font-size: max(5vw, calc($lg * 0.075));

Doesn't throw an error, but gives the wrong results. How can I do this? Why wouldn't max() between vw and px work, even though it should work with css natively?

Donald Zhu
  • 672
  • 4
  • 14

1 Answers1

0

Turns out, you just need to use #{} to interpolate the variable. I didn't know that as I am new to scss.

Donald Zhu
  • 672
  • 4
  • 14