Troubles to understand calc function

I’ve studied calc(expression) function, I can use <length>,<frequency> <angle> ,<time> or <percentage> together inside the function, but
what happens if for example I need to set transition-delay where a <time> is needed, so I use calc() function in this way calc(2px - 3s), 2px is a length, 3s is time, how css resolves this calculation when the data types are so differents?.

Hi @elliot.williamson!

While you can use any of those kinds of data types inside calc(), they need to be able to resolve to a real computed value.

So something like width: calc(100% - 2px - 0.5rem) will make sense, as all those data types resolve to pixels in the final computed value.

But something like transition-delay: calc(2px - 3s); won’t work — the don’t resolve to the same computed value, so it doesn’t make sense.

You could use calc() with transition delay like this — say you wanted to define a minimum delay offset that all transitions have, and then add to that as required? See this example:

:root {
  --delay-offset: 2s;
}

a:link {
  ...
  transition-delay: calc(var(--delay-offset) + 3s)
}
1 Like