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(); }

IE8 loves pixels

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

$px-only: true;

Once compiled, all your:

font-size: rem(1.4);

Will transform to:

font-size: 14px;

(assuming your html font-size is 10px)

Leave a Reply

Add <code> Some Code </code> by using this tags.