Px to Rem

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@mixin x-rem($property, $values) {
  $base-font-size: 10px;
  $px-values: ();
  $rem-values: ();
 
  @each $value in $values {
    @if $value == 0 or $value == 0px {
      $px-values: join($px-values, 0);
      $rem-values: join($rem-values, 0);
    } @else if type-of($value) == number and not unitless($value) and (unit($value) == px) {
      $new-rem-value: $value / $base-font-size;
      $px-values: join($px-values, round($value));
      $rem-values: join($rem-values, #{$new-rem-value}rem);
    } @else {
      $px-values: join($px-values, round($value * $base-font-size));
      $rem-values: join($rem-values, #{$value}rem);
    }
  }
  #{$property}: $px-values;
  #{$property}: $rem-values;
}

.test {
  @include x-rem(font-size, 20px);
}

SassMeister-output.css

.test {
  font-size: 20px;
  font-size: 2rem;
}