Responsive Scale

_resp-scale.scss

// Requires SASS >= 3.3 and responsive.scss 
// https://gist.github.com/maxluster/168e650267bac9faaafd
// 
// Scale value with $width for each $width in $named-breakpoints map.
// Usage : @include responsive("font-size", $base-font-size + px,
//   resp-scale($base-width, $base-font-size));
@function resp-scale($width, $value, $scale-up: false) {
  $m : ();
  @each $k, $v in $named-breakpoints {
    $ok : true; 
    $v: $v / ($v * 0 + 1); // strip-units

    @if $v > $width { 
        $ok : $scale-up; 
    }

    @if $ok {
        $res : round($v * $value / $width);
        $m: map-merge($m, ("#{$k}": $res +'px'));
      }
    }
    @return $m;
}

The cool thing is that if your properties are exclusively set in rem then the following @include is all you need to scale everything to any width!

@import "responsive"; // https://gist.github.com/maxluster/168e650267bac9faaafd

$named-breakpoints: (
   "320" : 320px,
   "480" : 480px,
   "iphone5" : 540px,
   "iphone5-max" : 568px,
   "android" : 640px,
   "ipad-min": 768px,
   "tablet-min": 800px,
   "big1": 1400px,
   "big2": 1600px,
   "big3": 1800px,
   "big4": 2000px,
); 

@include responsive("font-size", $base-font-size + px, resp-scale($base-width, $base-font-size));

If you want to scale up (when breakpoint width is greater than the base width), set the $scale-up argument to true.