Bourbon + bootstrap: and use of REM function

[iangregsondev]

As part of bootstrap there is a css reset that appears to set the font-size to 10px on the html element and 14px on the body. I assumed that the REM function takes into account the HTML value.

I have forced a reset using $em-base to 10px like so

@import 'bourbon';

$em-base: 10px !global;

but an image that is set to rem(16) ends up being a computed value of 10px i.e. which is not right. rem(16) != 1em.

    height: rem(16);
    width: rem(16);

Still a little confused, the only way I was able to fix the problem was to set the font-size on the html to the same size as on the body (also set via bootstrap). Although I don't know what knock on affects this is going to have.

$em-base: 14px !global;

html {
  font-size: $em-base;
}

I thought the rem function looks at the font-size on the html, which according to dev tools (because of bootstrap.css) it is set to 10px.

I am sure I am not understanding something and would appreciate any input anyone has.

Thanks

[tysongach]

Hi @ianjohnspain! Let me see if I understand correctly…

If you use rem(16), you get an output of 0.625rem (this computes to 10px if html is set to 16px)?

I assumed that the REM function takes into account the HTML value.

This isn’t actually the case. Since Sass gets compiled into CSS, we are unable to truly know what font size the html element is set to upon rendering a page in the browser.

This is why we removed Bourbon’s rem() and em() functions in v5.0 (currently in beta), because they are at high risk of lying. rem(12) could sometimes be computed into 12px, but sometimes not. More info on this here: #691

[iangregsondev]

Ah thanks. Ok. Thanks for the info