Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

rem() is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.

branch: master

This branch is 0 commits ahead and 0 commits behind master

Update readme

Update readme to reflect changes in pixel-fallback control variable names, for voice and tone, clarity and length. 
latest commit 281dea4f46
Ryan Frederick authored November 26, 2012
Octocat-spinner-32 stylesheets Merge in changes from the vertical rhythm improvements for Compass June 07, 2012
Octocat-spinner-32 test Move unit conversions in to own partial April 26, 2012
Octocat-spinner-32 .gitignore Added .gitignore and test directory August 10, 2011
Octocat-spinner-32 README.md Update readme November 26, 2012
Octocat-spinner-32 Rakefile Added Rake task with rake sass:convert for converting the .sass to .s… August 10, 2011
Octocat-spinner-32 changelog.md Rewrite the mixin from scratch April 03, 2012
README.md

rem() is a Sass mixin for setting css properties in rems with fallback values in pixels for less-capable browsers.

Signature

@mixin rem($property, $values, [$use-px-fallbacks: $rem-with-px-fallbacks])

Usage

(Note that a version of this mixin will be included in an upcoming release of Compass.)

// Set configurable variables, if you want to change defaults
$base-font-size: 18px; // default: 16px, same as default browser font-size
$rem-with-px-fallbacks: true; // default: true;

// Import the rem partial
@import "my-partials-path/rem";

// Style a heading
h1 {
  @include rem(font-size, 2rem);
  @include rem(margin-bottom, 1.5rem)
}

// Output a border with width set in rems
.box {
  @include rem(border, 1px solid #bff);
}

The following CSS will be produced:

h1 {
  font-size: 36px;
  font-size: 2rem;
  margin-bottom: 27px;
  margin-bottom: 1.5rem;
}

.box {
  border: 1px solid #bbffff;
  border: 0.063rem solid #bbffff;
}

There are no restrictions on the style property/ies you can pass in. Values that aren’t in px or rem pass through the mixin untouched. Therefore, you can mix units and still get correct results:

.crazy-units {
  @include rem(padding, .5rem 16pt 8px .5em);
}

Controlling pixel fallbacks

You can use the mixin without supporting older browsers either one a case-by-case basis or globally.

To control fallbacks at the mixin level as-needed, pass false as a parameter after your values:

@include rem(margin, 21px auto, false);

To disable pixel fallbacks globally, set the global $rem-with-px-fallbacks to false before importing the partial:

$print-rem-px-fallbacks: false;

@import "path/to/rem";

Based on the work of Ray Brown and Adam Stacoviak. Huge thanks to Chris Eppstein and Nathan Weizenbaum for the awesomeness that is Compass and Sass.

Something went wrong with that request. Please try again.