Skip to content

Instantly share code, notes, and snippets.

@mrdanadams
Created March 29, 2012 13:32
Show Gist options
  • Save mrdanadams/2237465 to your computer and use it in GitHub Desktop.
Save mrdanadams/2237465 to your computer and use it in GitHub Desktop.
PX to EMs conversion in Sass
/* See http://mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/ */
/* Default font size in pixels if not overridden. */
$baseFontSize: 16;
/* Convert PX units to EMs.
Ex: margin-right: pem(16);
*/
@function pem($pxval, $base: $baseFontSize) {
@return #{$pxval / $base}em;
}
/* Used to convert PX to EMs for multiple properties or values or both.
$base is an optional measurement that allows making measurements relative to the parent font size rather than the current. Also accepts a list of lists (instead a list of values) for properties that accept multiple lists of values. Only numbers of converted; everything else is passed through.
Examples:
@include scale(line-height, 30)
@include scale(line-height, 30, 16)
@include scale(width height, 125);
@include scale(padding, 0 25, 16);
@include scale(text-shadow, (#0d6e28 1 1) (#777 0 0 2), 16);
@include scale(box-shadow, (inset 0 0 0 1 #2a9022) (inset 0 0 3 #459966), 16);
*/
@mixin scale($props, $sizes, $base: $baseFontSize) {
$values: ();
$sublists: false;
@each $s in $sizes {
/* unwrap lists for values that have multiple list of values such as text-shadow */
@if type-of($s) == list {
$sublists: true;
$vv: ();
@each $ss in $s {
$vv: append($vv, if(type-of($ss) == number, #{$ss / $base}em, $ss));
}
$values: append($values, join((), $vv));
} @else {
$values: append($values, if(type-of($s) == number, #{$s / $base}em, $s));
}
}
$value: join((), $values, if($sublists, comma, space));
@each $prop in $props { #{$prop}: $value }
}
@bluehiveinteractive
Copy link

Curious...what are you guys setting for your font-size in your sass for html/body for this?

I just dropped _pems.scss into my sass folder and imported it in my style.scss and I set some text

p { font-size: pem(16);

I inspected it in Chrome and it says font-size: 1em;

however its obviously much larger than 16px

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment