Last active
January 31, 2019 17:51
-
-
Save davidensinger/5217667 to your computer and use it in GitHub Desktop.
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
/* | |
* 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; | |
} |
Thanks for the @mixin. I've added a check so you don't end up with a double 0 value if something is set to 0.
// output the converted rules
@if $px-values == $rem-values {
#{$property}: $px-values;
} @else {
#{$property}: $px-values;
#{$property}: $rem-values;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I only added support for % and auto values to this otherwise fantastic mixin.