Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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;
.foo {
@include rem(padding, 8 16 16);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.