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)

Leave a Reply

Your email address will not be published. Required fields are marked *