REMs with fallback

Use rem values with a px-value fallback for IE8- and Opera Mini.

use-name

scut-rem-fallback

type

mixin only

arguments

$pixels
The px-value you wish to convert to rems. No px unit necessary (e.g. 20 is fine, so is 20px). Passing a list will result in a list of rem values (see examples).
$property

default

font-size

The CSS property to which you'll apply the rem-value (along with its px-value fallback).

Note: The base pixel value with which to calculate your rem-value is by default 16px: to change this for your project, you can set your own $scut-rem-base variable prior to using this mixin.

Take a look at Jonathan Snook's article on the issue to learn about this fallback trick — why it's necessary and why it works.

If you don't need to support IE8 and Opera Mini, consider using the scut-rem function, instead, so you don't have to pass the CSS property as an argument.

Also, have a look at scut-rem's entry for more information (and references) about rem units, how they differ from em units, and the compatibility issue.

example

SCSS

.eg-rem-fallback-1 { font-size: 20px; }
.eg-rem-fallback-2 { @include scut-rem-fallback(20); }
.eg-rem-fallback-3 {
  @include scut-rem-fallback(30 50px 0 25px, margin);
  @include scut-rem-fallback(20 30px, padding);
  border: 5px solid;
}

compiled CSS

.eg-rem-fallback-1 {
  font-size: 20px;
}

.eg-rem-fallback-2 {
  font-size: 20px;
  font-size: 1.25rem;
}

.eg-rem-fallback-3 {
  margin: 30px 50px 0px 25px;
  margin: 1.875rem 3.125rem 0rem 1.5625rem;
  padding: 20px 30px;
  padding: 1.25rem 1.875rem;
  border: 5px solid;
}

Result

Variation 1: with a font-size of 20px.

Variation 2: with a font-size in rems matching 20px, and a true-pixel-value fallback.

Variation 3: Demonstrating 1) the $property argument, 2) that you can pass a list of pixels-values, and 3) that you can include or exclude the px-unit.