Skip to content

Instantly share code, notes, and snippets.

@jessicaldale
Forked from davidensinger/rem-mixin.scss
Created May 8, 2013 18:44
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jessicaldale/5542616 to your computer and use it in GitHub Desktop.
/*
* a small mixin for easy use of rem with px as fallback
* usage: @include x-rem(font-size, 14px)
* usage: @include x-rem(marign, 0 12px 2 1.2)
* usage: @include x-rem(padding, 1.5 24px)
*
* thanks to Eric Meyer for https://github.com/ericam/susy
* and Hans Christian Reinl for http://drublic.de/blog/rem-fallback-sass-less/
*/
@mixin x-rem($property, $values) {
// Create a couple of empty lists as output buffers.
$base-font-size: 16px; // should be consistent with your html/body font-size
$px-values: ();
$rem-values: ();
// Loop through the $values list
@each $value in $values {
// For each property value, if it's in rem or px, derive both rem and
// px values for it and add those to the end of the appropriate buffer.
// Ensure all pixel values are rounded to the nearest pixel.
@if $value == 0 or $value == 0px {
// 0 -- use it without a unit
$px-values: join($px-values, 0);
$rem-values: join($rem-values, 0);
} @else if type-of($value) == number and not unitless($value) and (unit($value) == px) {
// px value given - calculate rem value from base-font-size
$new-rem-value: $value / $base-font-size;
$px-values: join($px-values, round($value));
$rem-values: join($rem-values, #{$new-rem-value}rem);
} @else if type-of($value) == number and not unitless($value) and (unit($value) == "%") {
// % value given - don't add px or rem
$px-values: join($px-values, #{$value});
$rem-values: join($rem-values, #{$value});
} @else if $value == auto {
// auto - don't add px or rem
$px-values: join($px-values, auto);
$rem-values: join($rem-values, auto);
} @else {
// unitless value - use those directly as rem and calculate the px-fallback
$px-values: join($px-values, round($value * $base-font-size));
$rem-values: join($rem-values, #{$value}rem);
}
}
// output the converted rules
#{$property}: $px-values;
#{$property}: $rem-values;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment