Last active
August 29, 2015 14:07
-
-
Save besimhu/dfcad5cfb4c0feb6e025 to your computer and use it in GitHub Desktop.
This is a modified version of http://davidensinger.com/2013/03/using-rems-with-sass/ Base font size in pixels, if not already defined. Should be the same as the font-size of the html element.
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, $use-px-fallback: $rem-with-px-fallback) { | |
// Create a couple of empty lists as output buffers. | |
$font-size: $base-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 font-size | |
$new-rem-value: $value / $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 * $font-size)); | |
$rem-values: join($rem-values, #{$value}rem); | |
} | |
} | |
// Output the converted rules | |
// Use pixel fallback for browsers that don't understand rem units. | |
@if $use-px-fallback { | |
#{$property}: $px-values; | |
} | |
#{$property}: $rem-values; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment