Created
August 9, 2011 16:48
-
-
Save raybrownco/1134548 to your computer and use it in GitHub Desktop.
rem() is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* '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; | |
} | |
} |
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!
Good find... I added another if for 'auto' statements:
@else if $value == 'auto' {
$rem_values: append($rem_values, $value);
}
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.
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
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.