Skip to content

Instantly share code, notes, and snippets.

@joshangell
Created September 14, 2012 15:09
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshangell/3722518 to your computer and use it in GitHub Desktop.
Save joshangell/3722518 to your computer and use it in GitHub Desktop.
rem() is a Sass mixin that converts pixel values to rem values.
/* 'rem' is a Sass mixin that converts pixel values to rem values
* Returns 2 lines of code — regular pixel values and converted rem values
*
* 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
// Value should be same as font-size value for the html element
// If html element's font-size set to 62.5% (of the browser's default 16px),
// then 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 only one (numeric) value, return the property/value line for it.
@if type-of($px_values) == 'number' {
#{$property}: $px_values / $baseline_rem;
}
// If more than one value, create list & 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment