Can CSS values changed relatively?

Question

#foo{font-size:14px;}

Now #foo has 14px font size

#foo{font-size:$-2px} // Hypothetical code

Now #foo has 12px font size. (14px - 2px)

Is this possible by any means? To dynamically change the value of a selector.

Answer 1

You can use rem which will refer to the global font-size.

:root
{
  font-size : 14px;
}

#foo
{
  font-size : calc(1rem - 2px);
}

<div>
  I am a 14px text according to the root font-size
</div>
<div id="foo">
  I am a 12 pixel text according to the rem font-size
</div>

EXPLANATION

The rem will refer to the global css. So when processing (1rem - 2px), this is actually (14px - 2px).