A quick SASS helper function and mixin to calculate rem values and px fallbacks for it

_rem.scss

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

@function rem($x, $fallback:false){

  @if type-of($x) != "number" or $x == 0 {
    @return $x;
  } @else {

    $base: 16;
    $value: strip-units($x);
    $unit: unit($x);

    @if $unit == "rem" or $unit == "" {
      @return if($fallback, $base*$value*1px, $value*1rem);

    } @else if unit($x) == "px"{
      @return if($fallback, $value*1px, $value/$base*1rem);

    } @else {
      @return $x;
    }

  }

}

// remmify adapted from
// http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
@mixin remmify($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: rem( nth($values, $i), true );
    $pxValues: #{$pxValues + $value};

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  }

  @for $i from 1 through $max {
    $value: rem( nth($values, $i), false );
    $remValues: #{$remValues + $value};

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }

  @if $pxValues == $remValues {
      #{$property}: $remValues;
    } @else {
      #{$property}: $pxValues;
      #{$property}: $remValues;
    }
}

using-rem-function.scss

@import "rem"

// rem function usage:
// Define the CSS attribute twice, and pass true as the second argument 
// on the first time. This way you get both fallback px value for IE8 
// and below, and the actual rem value for other browsers.


// 1. define container max-width in pixels

.container {
  max-width: rem(960px, true);
  max-width: rem(960px);
}

// CSS:
// .container {
//   max-width: 960px;
//   max-width: 60rem;
// }


// 2. define container max-width in rems

.container {
  max-width: rem(60, true); // rem(60) gives the same output as rem(60rem)
  max-width: rem(60);
}

// CSS:
// .container {
//   max-width: 960px;
//   max-width: 60rem;
// }


// (3. if you use any other unit than "rem", "em" or "", the given value is passed trough)

.container {
  max-width: rem(60em, true);
  max-width: rem(60em);
}

// CSS:
// .container {
//   max-width: 60em;
//   max-width: 60em;
// }

using-remmify-mixin.scss

@import "rem"

// remmify mixin usage:
// Call only once, giving the CSS property as the first argument, 
// and wanted values for that property from the second argument onwards.


// 1. define container max-width with a single mixin call

.container {
  @include remmify(max-width, 960px);
}

// CSS:
// .container {
//   max-width: 960px;
//   max-width: 60rem;
// }

// 2. define container margins with a single mixin call

.container {
  @include remmify(margin, 0, 0, 1rem, 0);
}

// CSS:
// .container {
//   margin: 0 0 16px 0;
//   margin: 0 0 1rem 0;
// }

Thanks! I shamelessly copied the strip-units function and used it to improve my best friend in the world, the em() function: https://gist.github.com/Darep/5979236

❤️