CSS - how to specify unit of a calc()?

Question

Assume I want the following styling:

font-size: 3rem;

However, I do not want to hardcode the 3. Rather, I want it to be a result of a calc() operation (e.g. calc(2 + 1)). How do I specify the unit rem to follow the results of the calc() operation? I'm trying to do something like this:

font-size: calc(2 + 1)rem;

I guess I'm looking for a concatenation feature? CSS solution only, please.

@StackOverflowNewbie CSS custom-properties can have units though... — Dai, Oct 18 '21 at 05:26
Take a look at this answer https://stackoverflow.com/a/50019567/13304024 — Ivan Beliakov, Oct 18 '21 at 05:27
@IvanBeliakov - I think your link should work for me. Do you want to put that down as an answer? — StackOverflowNewbie, Oct 18 '21 at 05:30

Ivan Beliakov · Accepted Answer · 2021-10-18T07:41:57.363

2

In the comments you mentioned variables. So the answer from here may be useful.

Use variable in calc and multiply it by 1 with the needed unit:

font-size: calc(var(--size) * 1rem);

edited Oct 18 '21 at 07:41

answered Oct 18 '21 at 05:37

Ivan Beliakov

529
3
14

score 0 · Answer 2 · answered Oct 18 '21 at 05:34

0

Not sure why you'd want to do this, but you could:

font-size: calc((2 + 1) * 1rem);

answered Oct 18 '21 at 05:34

ray

26,557
5
28
27

CSS - how to specify unit of a calc()?

2 Answers2