SCSS Mixin for rem + px fallback on multiple properties and property lists

SCSS Mixin for rem + px fallback on multiple properties and property lists

// Global Vars

$basefontsize: 16 !default;

// Mixins

// input pixel value unitless: 8 vs 8px
// ex. @include rem(padding, 8 12 16 24)

@mixin rem($property, $px: $basefontsize) {

    $pxvalues: null;
    $remvalues: null;

    @each $pxvalue in $px {
        $pxvalues: append($pxvalues, ($pxvalue)+px);
	$remvalues: append($remvalues, ($pxvalue/$basefontsize)+rem);
    }

	#{$property}: $pxvalues;
	#{$property}: $remvalues;

}

// SCSS

.foo {
    @include rem(padding, 8 16 16);
}