CSS type casting? How to add "px" and "rem" using calc()?

Question

Assume I have variables with the following values: 32px and 1rem. I need to combine the two values and set, say, font-size in rem units. How is that done?

This does not work: font-size: calc(32px + 1rem);

In the scenario given, I actually want to set the font-size to 3rem. In my mind, the first step would be for me to convert 32px to its rem equivalent and then add the 1rem that I have (so, something like calc(32px / 16) + 1rem)). That doesn't work, either.

Is there a way to convert the 32px to its rem equivalent?

Answer 1

For converting with calc simply multiply your conversion formula by 1 of the desired unit. Since you want to convert a pixel value to rem, you can do this: calc(32 / 16 * 1rem)