Rem Font Sizing My Favourite SASS and LESS Mixins

Scroll this

It doesn’t matter if you’re using LESS or SASS for your CSS preprocessing, I just wanted to share my favourite rem font sizing mixins with you.

The rem font-size unit is similar to em , except, instead of cascading the size it is relative to the root element (ie: html tag) (rem sizing information). With fantastic modern browser support, we really don’t need the px fallback, but I’ve included it for those of you still having to suffer through supporting IE 8.

This mixin will help keep your CSS clean and from repeating yourself. As a note, these mixins assume:

html {
     font-size: 62.5%; /* Sets the base sizing to 10 pixels, easier math */
}

SCSS Mixin

@mixin font-size($sizeValue: 1.6) {
     font-size: ($sizeValue * 10) + px;
     font-size: $sizeValue + rem;
}

LESS Mixin

.font-size(@sizeValue) {
     @remValue: @sizeValue;
     @pxValue: (@sizeValue * 10);
     font-size: ~"@{pxValue}px";
     font-size: ~"@{remValue}rem";
}

Using the mixins

It’s pretty simple to use the above mixins. You just need to call them like any other mixin and the correct CSS will be processed.

SCSS

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

LESS

p {
     .font-size(18);
}
Tags: / Category: CSS3