gistfile1.scss

/*
    Following this suggestion by @aral:
    https://twitter.com/#!/aral/status/161833507423916032 and
    https://twitter.com/#!/aral/status/161833979736096769

    I realised that a CSS Pre-processor could help save some time here if you
    use the same values for px and rem.

    This works in SCSS: 
*/

@mixin font_size($size) {
    font-size: #{$size}px;
    font-size: #{$size}rem;
}

/* Usage
*/

html {
    font-size: 1px;
}

    body {
        @include font_size(16); // 16px/rem
    }

    h1 {
        @include font_size(24); // 24px/rem
    }

This will clean up if you pass in a number with px units instead of glomming it on with interpolation. Interpolation causes the number to be cast to a string which is why the division doesn't do anything. Also, it's more obvious to a reader what font_size(16px) is doing.

I know that this Gist is for SASS, but here's a link to a Gist I just created for Stylus that solves the same problem (I’m currently working with Stylus on the Breaking Things site.) It’s a work in process but you can see where I’m going with it.

https://gist.github.com/3138403