Skip to content

Instantly share code, notes, and snippets.

Embed
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 (http://chriseppstein.github.com)
* and Martin Bavio (http://martinbavio.com) 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;
}
}
@adamstac

This comment has been minimized.

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.

@bitmanic

This comment has been minimized.

Copy link
Owner Author

bitmanic commented Aug 10, 2011

Your wish has been granted. https://github.com/bitmanic/rem. Thanks for your interest, and for any future improvements you make to the code. Enjoy!

@sswany

This comment has been minimized.

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);
}
@CoplanConsulting

This comment has been minimized.

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.

@sagalbot

This comment has been minimized.

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
You can’t perform that action at this time.