Mixin to produce px fallbacks with rem duplicates

1-px-to-rem-mixin.scss

// Mixin that allows to specify arbitrary CSS properties with and output rem with pixel fallback.
// Shorthand assignments are supported too!
// Based off http://intuio.at/en/blog/an-improved-sass-rem-mixin-for-unitless-numbers/
$baseLine: 16px;
 
@mixin rem($property, $values)
{
    // Placeholder variables
    $shorthand_px:  "";
    $shorthand_rem: "";
 
    // Parameter $values might be a list of elements
    @each $value in $values
    {
        // Current value is a valid number and greater than 0
        @if $value != auto and $value != 0
        {
 		$value: $value / ($value * 0 + 1);
			$baseLine: $baseLine / ($baseLine * 0 + 1);
            // Add 'px' and 'rm' to the current value and store in
            // placeholder variables
            $shorthand_px: #{ $shorthand_px + " " + $value + px };
            $shorthand_rem: #{ $shorthand_rem + " " + ($value / $baseLine) + rem };
        }
        // Current value is 'auto' or 0
        @else
        {
            // Add only 'auto' or 0 to the placeholder variables
            $shorthand_px: #{ $shorthand_px + " " + $value };
            $shorthand_rem: #{ $shorthand_rem + " " + $value };
        }
    }
 
    // Output the CSS property in pixels and rems
    #{$property}:$shorthand_px;
    #{$property}:$shorthand_rem;
}

2-source.scss

// Will need to write a command to convert standard CSS rules in to @include rem
// There's no way I'm typing that everytime!
$baseFontSize: 20px;
$baseMarginSize: 14px;

foo {
	@include rem('font-size', $baseFontSize);
}

bar {
	@include rem('margin-bottom', $baseMarginSize);
}

baz {
	@include rem('padding', 10px 15px $baseMarginSize);
}

fish {
	@include rem('line-height', 30px);
}

3-output.css

// Almost produces this. Not quite as neat or succinct, but, hey…
// rem = value / 16

foo {
	font-size: 20px;
	font-size: 1.25rem;
}

bar {
	margin-bottom: 14px;
	margin-bottom: .875rem;
}

baz {
	padding: 10px 15px 14px;
	padding: .625rem .9375rem .875rem;
}

fish {
	line-height: 30px;
	line-height: 1.875rem;
}

I'm not that proficient yet with all things SASS, but this code is included in Foundation 4, maybe it's what you need:

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)

@function emCalc($pxWidth) {
@return $pxWidth / $em-base * 1em;
}


// Creating rems and pixels

@function remCalc($pxWidth) {
@return $pxWidth / $em-base * 1rem;
}


Then you can use it like so:

$topbar-title-font-size: emCalc(17px);


I think you're after mixins Stowie.

Have you come across this article? http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/

I'm not sure, but you might be after something like this: https://github.com/bitmanic/rem

@azzcatdesign: that just does a conversion.

@CaseyLeask: I couldn't bitmanic's rem to work, but found another and modified it slightly