Last Updated: February 25, 2016
·
1.354K
· nahuelsotelo

SCSS mixin for rem font sizing (with fallback)

Normalize the base at 16px:

html {
    font-size: 100%; 
}

Mixin:

@mixin font-size($size) {
    font-size: $size + px;
    font-size: ($size/16) + rem;
}

Usage:

p {
    @include font-size(14);
}

Result:

p {
    font-size: 14px;
    font-size: 0.875rem;
}

More info about font sizing with rem: http://goo.gl/85fhM