REM mixin for your SASS

REM units are great, I love them. It's easy, straight forward and give you flexibility when it comes to changing sizes globally for example.

If you have to support IE8, well you can't use REM units. For tha, welcome this sweet SASS mixin:

REM Mixin

$px-only: false !default; @function parseInt($n) { @return $n / ($n * 0 + 1); } @function rem($values) { $list: null; @each $value in $values { $unit: unit($value); $val: parseInt($value); @if ($px-only) { @if ($unit=='rem') or ($unit=='') { $list: append($list, ($val * 10) + px); } @else { $list: append($list, $value); } } @else if($unit=='px') or ($unit=='rem') { $list: append($list, $value); } @else { // we treat default unit as rem $list: append($list, $value + rem); } } @return $list(); }
Code language: PHP (php)

IE8 loves pixels

So, in your IE8.scs, before you import all your SASS components just set this:

$px-only: true;
Code language: PHP (php)

Once compiled, all your:

font-size: rem(1.4);
Code language: CSS (css)

Will transform to:

font-size: 14px;
Code language: HTTP (http)

(assuming your html font-size is 10px)

About Ricard Torres

Senior Front-end Software Engineer at Netcentric, from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> if you need to.