REMs with fallback

view source

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

mixin only
  1. $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).

  2. $property

    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.



.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;


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.