Bootstrap: Include a rem-calc() function in utilities

[liquidvisual]

I think Foundation handles this well, you enter in a pixel value (or multiple) and the output is in rem units.

Eg.

rem-calc(56) 

...or for shorthand properties:

rem-calc(56 56 56 10) 

I find this particularly helpful when editing values in the variables file. It's a lot easier to think in pixels but output in rems. Especially if you're working off a PSD.

Take this for example:

$font-size-h1: 2.5rem   

What is 2.5rem? It doesn't mean much to me. I need to run this through an online rem convertor before I can figure out what it actually is.

In my opinion, this is much easier to understand quickly:

$font-size-h1: rem-calc(40); // 2.5rem

[cvrebert]

This was punted in https://github.com/twbs/bootstrap/issues/17070#issuecomment-136934429

[cameronroe]

I'm just curious as to why v4 is using 1rem as the html font-size? Wouldn't it make more sense to use font-size: 62.5% which sets the browser to 10px and then set the body to 1.6rem? That way you can think in terms of pixels with a dot in the middle. (ex. 1.8rem = 18px, 1.4rem = 14px). This makes much more sense in my mind, than using a utility function everywhere I need to specify a rem amount.

[mdo]

No plans to add this in v4.0.0 (though we could do it in a v4.1 perhaps if folks are really adamant about it). And @cameronjroe peep the linked comment/issue above for more details on that decision.

[paulkoegel]

You can always add your own rem-calc function. Here's one you can use: http://www.stubbornella.org/content/2013/07/01/easy-peasy-rem-conversion-with-sass

v4 also defaults to 16px font-size.

[JulianJorgensen]

I love the foundation rem-calc() function too. Definitely would be great for bootstrap to have too!

[wish-master]

At the begin:
@function rem-calc($size) { $remSize: $size / 16; @return #{$remSize}rem; }

then use it for example like this:
.navbar { height: rem-calc(90); }

[av-fwstudio]

You can simply copy file: foundation-sites/scss/util/_unit.scss (its can work independently) & paste it to your app folder: assets/scss/ & import the same & then start using rem-calc