Skip to content

Instantly share code, notes, and snippets.

@quattromani
Last active August 29, 2015 14:06
Show Gist options
  • Save quattromani/93c28a25477224b8893d to your computer and use it in GitHub Desktop.
Save quattromani/93c28a25477224b8893d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<button>Button</button>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
// My adaptation of Rem fallback mixin
// by Karl Merkli
//====================================
// I like easy base-10 maths
$base-font-reset: 10px;
// this flag turns px output on or off
$support-legacy: true;
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
@mixin rem($property, $values...) {
$max: length($values);
$pxValues: '';
$remValues: '';
@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
$pxValues: #{$pxValues + $value*$base-font-reset/10};
@if $i < $max {
$pxValues: #{$pxValues + " "};
}
}
@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
$remValues: #{$remValues + $value/10}rem;
@if $i < $max {
$remValues: #{$remValues + " "};
}
}
@if $support-legacy {
#{$property}: $pxValues;
}
#{$property}: $remValues;
}
// Usage
button {
@include rem(padding, 10, 20, 13, 8);
}
button {
padding: 10px 20px 13px 8px;
padding: 1rem 2rem 1.3rem 0.8rem;
}
<button>Button</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment