Generated by SassMeister.com.

SassMeister-input-HTML.html

<div></div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@function convert-unit($value, $unit) {
  $units: (
    'px': 0px,
    'cm': 0cm,
    'mm': 0mm,
    '%': 0%,
    'ch': 0ch,
    'in': 0in,
    'em': 0em,
    'rem': 0rem,
    'pt': 0pt,
    'pc': 0pc,
    'ex': 0ex,
    'vw': 0vw,
    'vh': 0vh,
    'vmin': 0vmin,
    'vmax': 0vmax,
    'deg': 0deg,
    'turn': 0turn,
    'rad': 0rad,
    'grad': 0grad,
    's': 0s,
    'ms': 0ms,
    'Hz': 0Hz,
    'kHz': 0kHz,
    'dppx': 0dppx,
    'dpcm': 0dpcm,
    'dpi': 0dpi,
  );
 
  @if map-has-key($units, $unit) {
    @return map-get($units, $unit) + $value;
  }
 
  @error "Unknown unit `#{$unit}`.";
}

$s-font-base: 16px;

@function strip-unit($value) {
    @return $value / ($value * 0 + 1);
}

@function isRelative($val) {
  $relUnits: rem em;
  @each $unit in $relUnits {
    @if $unit == unit($val) {
      @return true;
    }
  }
  @return false;
}

@function px2rel($px, $baseSize: $s-font-base, $unit: rem) {
    $return: null;
    @each $val in $px {
      @if type-of($val) == number and unit($val) == 'px' {
        $return: append($return, convert-unit( strip-unit($val) / strip-unit($baseSize), $unit) );
      } @else {
        $return: append($return, $val);
      }
    }
    @return $return;
}

@function rel2px($rel, $baseSize: $s-font-base) {
  $return: null;
    @each $val in $rel {
      @if type-of($val) == number and isRelative($val) {
        $return: append($return, convert-unit( strip-unit($val) * strip-unit($baseSize), px));
      } @else {
        $return: append($return, $val);
      }
    }
    @return $return;
}

@mixin remFallback($attr,$vals) {
  $values: px2rel($vals);
  $fallback: rel2px($vals);

  @if $fallback != $values {
    #{$attr}: $fallback;
  }
  #{$attr}: $values;
}

.test {
  border: px2rel(10px solid red);
}
.test-2 {
  @include remFallback(margin, 10px 20% 20em);
}
.test-3 {
  @include remFallback(border, 10px solid red);
}
.test-4 {
  @include remFallback(top, 2rem);
}
.test-5 {
  @include remFallback(border-width, 2rem 10px 3em 7%);
}
.test-5 {
  @include remFallback(border-radius, 1rem 0 1.5rem 50%);
}
.test-6 {
  @include remFallback(left, 10%);
}

SassMeister-output.css

.test {
  border: 0.625rem solid red;
}

.test-2 {
  margin: 10px 20% 320px;
  margin: 0.625rem 20% 20em;
}

.test-3 {
  border: 10px solid red;
  border: 0.625rem solid red;
}

.test-4 {
  top: 32px;
  top: 2rem;
}

.test-5 {
  border-width: 32px 10px 48px 7%;
  border-width: 2rem 0.625rem 3em 7%;
}

.test-5 {
  border-radius: 16px 0 24px 50%;
  border-radius: 1rem 0 1.5rem 50%;
}

.test-6 {
  left: 10%;
}

SassMeister-rendered.html

<div></div>