Menu icon Foundation
What does number in rem-calc() mean

can anyone explain rem-calc(13) - what does the number mean? pixels? ratio? percentage? is it relative to something else? i googles but can not find a decent explanation. Thanks

syntaxrem-calc

can anyone explain rem-calc(13) - what does the number mean? pixels? ratio? percentage? is it relative to something else? i googles but can not find a decent explanation. Thanks

Rafi Benkual over 5 years ago

The rem font-size unit is similar to em, only instead of cascading it's always relative to the root (html) element. This has pretty good modern browser support, it's just IE 8 and down we need to provide px fallbacks for.

Using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%.

Rem-calc is a sass function that converts pixels to REMs, so you can still think in pixels and end up with scalable em.

rem-calc(10px); // 10px will be converted to REMs

roxanne sutton over 5 years ago

Thank you, I am getting the REM concept, but I could not figure how foundation has no "px" in most rem-calc() in components.
I have found the function in _functions.scss and it comments that the "px" is not necessary.
I have been using "ems" for last few years in plain CSS, so this is actually foreign for me to consider the original in pixels that i am converting to REM.

roxanne sutton over 5 years ago

also I found this tool helpful, and may help others, https://offroadcode.com/prototypes/rem-calculator/

Rafi Benkual over 5 years ago

Thanks for the helpful link. We user the rem-calc(ulator) to ease the transition of people who have not embraced ems or rems. You could remove all instances of rem and add an em calc (not recommended).