Font Sizing with REM in SCSS

We just started using CSS preprocessors here at the office ( yeah were a bit late to the party ). We decided that SCSS was the way to go and lean on the Compass library for the most part.

Current versions of WordPress theme stress the importance of using REMs going forward for font-sizing, always with a pixel fallback.

When I researched this on the Compass site I found their was a lot of back-and-forth discussion and no real support built in. So I decided to whip up my own.

$base_font_size: 16;

@mixin font($pixels, $weight : normal) {
font-size: $pixels + px;
font-size: ( $pixels / $base_font_size ) + rem;
font-weight: $weight;
}

And we include it this way.

@include font(14, bold);

And we get this!

font-size: 14px;
font-size: 0.875rem;
font-weight: bold;

We basically take whatever the pixel value should be, divide that by our base font size ( ie. 16 ) and automagically spit out our REM value with our pixel fallback.

We have also defined the font-weight, our default is normal but in the case that we need to have bold or override the option is available.