PX to EMs conversion in Sass

_pems.scss

/* 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 }
}

I've thought of this before. It'd be nice if some preprocessing could go on in Stylus so it know inheritance based on markup, so one wouldn't have to include context. But that's kinda' a pipedream. (I s'pose one could utilize Phantom.js to that end http://phantomjs.org/)

@crite70 I had the same thought, am currently going forward with:

 @mixin prem($prop, $pxval)
      #{$prop}: #{$pxval}px
      #{$prop}: #{$pxval / $baseFontSize}rem

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