Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Understanding and using CALC() Reply To: [Solved] Understanding and using CALC()

#166244
Paulie_D
Member

Chis just did a video on this sort of thing…it’s not precisely on point but it might give you some ideas: https://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/

However I think as a general rule the function would be

calc(30px / 978px)

Note the spacing…I think that’s important.

Note: The + and – operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% – 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage.
The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

https://developer.mozilla.org/en-US/docs/Web/CSS/calc