Last active
August 29, 2015 13:57
-
-
Save rjv/9516549 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
@mixin 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 { | |
// 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