Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
rem() is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
* 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
* It returns two lines of code — one of the regular pixel values (for IE), and another with the
* converted rem values (for everyone else). Special thanks to Chris Epstein (
* and Martin Bavio ( for the help and code!
* Sample input:
* .element {
* @include rem('padding',10px 0 2px 5px);
* }
* Sample output:
* .element {
* padding: 10px 0 2px 5px;
* padding: 1rem 0 0.2rem 0.5rem;
* }
// Baseline, measured in pixels
// The value should be the same as the font-size value for the html element
// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
// then the variable below would be 10px.
$baseline_px: 10px;
@mixin rem($property, $px_values) {
// Convert the baseline into rems
$baseline_rem: ($baseline_px / 1rem);
// Print the first line in pixel values
#{$property}: $px_values;
// If there is only one (numeric) value, return the property/value line for it.
@if type-of($px_values) == 'number' {
#{$property}: $px_values / $baseline_rem;
// If there is more than one value, create a list and perform equations on each value
@else {
// Create an empty list that we can dump values into
$rem_values: ();
@each $value in $px_values {
// If the value is zero, return 0
@if $value == 0 {
$rem_values: append($rem_values, $value);
// If the value is not zero, convert it from px to rem
@else {
$rem_values: append($rem_values, ($value / $baseline_rem) );
// Return the property and its list of converted values
#{$property}: $rem_values;
Copy link

adamstac commented Aug 10, 2011

Please turn this into a "full on" Git repo so I can help you improve and maintain this. :) I like the idea of using rem units with a fallback for px. I never fully embraced ems because of the inability to control the compounding issue, so using rem is certainly on my radar.

Copy link

raybrownco commented Aug 10, 2011

Your wish has been granted. Thanks for your interest, and for any future improvements you make to the code. Enjoy!

Copy link

sswany commented May 16, 2013

Good find... I added another if for 'auto' statements:

@else if $value == 'auto' {
    $rem_values: append($rem_values, $value);

Copy link

CoplanConsulting commented Nov 21, 2014

Getting an error now, what is a fix for this?

The result of 0px == 0 will be false in future releases of Sass.
Unitless numbers will no longer be equal to the same numbers with units.

Copy link

sagalbot commented Dec 2, 2014

I'm in the same boat as CoplanConsulting ^ above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment