Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save CristinaSolana/5483938 to your computer and use it in GitHub Desktop.
Save CristinaSolana/5483938 to your computer and use it in GitHub Desktop.
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment