v4: Can't set $font-size-base to a pixel value

Currently, $font-size-base is defined as:

$font-size-base: 1rem !default;

If you attempt to define your base font size using pixels, for example:

$font-size-base: 14px;

Then SASS will not compile because of Incompatible units: 'rem' and 'px'. in various calculations. It seems like you should be able to define a font size using pixels. If you are working with a designer who is using Sketch or something, you can sure bet that they have their font’s defined in pixels. A designer is not going to have any clue what a rem is.

[andresgalante]

Hi @Jakobud you should always avoid doing fonts in px, it’s not good for accessibility.

Let me help you with your designers using sketch issues 😃

You can set up a function that transform px to rem like this:

$font-size-root: 16; // no units, you assume the font size base of most browsers is 16px.

@function strip-unit($num) {
    @return $num / ($num * 0 + 1);
}

// prem stands for  px to rem.
@function prem($pxval, $base: $font-size-root) {
    @return strip-unit($pxval) / $base * 1rem;
}

Then if the designers set a 36px font size, you use it like this:

.class-name {
    font-size: pem(32); // Returns 2rem (or 32px)
}

This is a flexible solution that will let you use rems and your designers px. We are using it at our project with successful results. In fact we use this for all our measurements, the only thing we do in px are border-with. Designers use px we do prem 😃

hope it helps!

[patrickhlauke]

setting the base font size in pixels overrides any minimum font size the user may have set in their browser, or any minimum default rem size a browser on a specific platform has been set to. not all use 16px default - for instance, from memory, browser on some kindle devices uses 20px or more