Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

@import "breakpoint";

@function str-remove($str, $sub) {
    $i: str-index($str, $sub);
    @if $i == 0 { @return $str; }
    @else { @return str-remove(str-slice($str, 1, $i - 1) + str-slice($str, $i + 1, str-length($str)), $sub); }
}

@function map-debug($map) {
  $result: unquote("( ");
  @each $key, $value in $map {
    @if type_of($value) == 'map' {
      $result: unquote("#{$result} #{$key}: #{map-debug($value)}");
    } @else { $result: unquote("#{$result}#{$key}: #{$value}, "); }
  }
  $result: unquote("#{$result} )");
  $result: str-remove($result,",  )");
  $result: str-remove($result,"  ");
  @return quote($result);
}

@function n-get($map, $keys...) {
	@each $key in $keys { @if $map == null { @return null; } @else { $map: map-get($map, $key); } }
	@return $map; }

$units: (
	'em': 1em,
	'ex': 1ex,
	'ch': 1ch,
	'rem': 1rem,
	'%': 1%,
	'vw': 1vw,
	'vh': 1vh,
	'vmin': 1vmin,
	'vmax': 1vmax,
	'cm': 1cm,
	'mm': 1mm,
	'in': 1in,
	'px': 1px,
	'pt': 1pt,
	'pc': 1pc,
	'deg': 1deg,
	'grad': 1grad,
	'rad': 1rad,
	'turn': 1turn,
	's': 1s,
	'ms': 1ms,
	'dpi': 1dpi,
	'dpcm': 1dpcm,
	'dppx': 1dppx
);

@function one-unit($unit) { $one-unit: map-get($units, $unit); @return if($one-unit, $one-unit, 1); }
@function strip($value) { @return $value / one-unit(unit($value)); }
@function assert($value, $unit) { @return strip($value) * one-unit($unit); }

// width and gutter can be in rem or em; ideally rem
$bp-data: (
	a: (
		width: 30rem,
		gutter: 1rem,
		scale: 125%
	),
	b: (
		width: 45rem,
		gutter: 1rem,
		scale: 100%
	),
	c: (
		width: 60rem,
		gutter: 1rem,
		scale: 200%
	)
);

$html-font-size: 100% !default;

@mixin breakpoint-setup($data) {
	$breakpoints: () !global;
	@each $alias, $spec in $data {
	    $width: map-get($spec, width);
	    $gutter: map-get($spec, gutter);
	    $scale: map-get($spec, scale);
	    $breakpoint: (em: ($width + 2 * $gutter) * $scale / 100%, rem: $width);
	    $breakpoints: map-merge($breakpoints, (#{$alias}: $breakpoint));
	    @if $scale != 100% { @media (min-width: #{map-get($breakpoint, em)}) { html { font-size: $scale; } } }
	}
}

@mixin bp-setup($data) {
    $bp: () !global;
    $prev-scale: strip($html-font-size);
	@each $alias, $spec in $data {
		$width: assert(map-get($spec, width), em);
		$gutter: assert(map-get($spec, gutter), em);
		$scale: strip(map-get($spec, scale));
		$breakpoint: map-merge(map-get($data, $alias), (query: ($width + 2 * $gutter) * $scale / 100));
		$bp: map-merge($bp, (#{$alias}: $breakpoint)) !global;
		@if $scale != $prev-scale { @media (min-width: #{map-get($breakpoint, query)}) { html { font-size: assert($scale, '%'); } } }
		$prev-scale: $scale;
	}
}

// @include breakpoint-setup($bp-data);
@include bp-setup($bp-data);

@mixin bp-query($aliases...) {
    $aliases: if(length($aliases) == 1, nth($aliases, 1), $aliases); $directive: nth($aliases, 1);
	$lti: index(lessthan less-than lt before below, $directive); $query: ();
	@if $lti { $aliases: reject($aliases, $directive); $query: (max-width n-get($bp, nth($aliases, 1), query)); } 
	@else { @each $alias in $aliases { $query: append($query, n-get($bp, $alias, query)); } }
	@include breakpoint($query) { @content; }
}
@function bpp($alias, $parameter) {
    @return map-get(map-get($bp, $alias), $parameter);
}

@mixin rem-fb($map, $query: false) {
    @each $param, $args in $map {
        #{$param}: assert($args / strip($html-font-size / 100) * 16, px);
        #{$param}: assert($args, rem);
    }
    @if $query {
        @each $alias, $spec in $bp {
            @include bp-query($alias) {
                $html-font-size: map-get($spec, scale);
                // abstract this out to a separate mixin?
                @each $param, $args in $map {
                    #{$param}: assert($args / strip($html-font-size / 100) * 16, px);
                }
            }
        }
    }
}

.debug {
    @include rem-fb((
        width: 5rem,
        height: 2
    ), true);
    map: map-debug($bp);
    param: bpp(a, width);
    bp1: n-get($bp, a, query);
    bp2: n-get($bp, b, query);
    bp3: n-get($bp, c, query);
    @include bp-query(a b) {
        color: blue;
    }
}

SassMeister-output.css

@media (min-width: 40em) {
  html {
    font-size: 125%;
  }
}
@media (min-width: 47em) {
  html {
    font-size: 100%;
  }
}
@media (min-width: 124em) {
  html {
    font-size: 200%;
  }
}
.debug {
  width: 80px;
  width: 5rem;
  height: 32px;
  height: 2rem;
  map: "( a: ( width: 30rem, gutter: 1rem, scale: 125%, query: 40em ) b: ( width: 45rem, gutter: 1rem, scale: 100%, query: 47em ) c: ( width: 60rem, gutter: 1rem, scale: 200%, query: 124em ) )";
  param: 30rem;
  bp1: 40em;
  bp2: 47em;
  bp3: 124em;
}
@media (min-width: 40em) {
  .debug {
    width: 64px;
    height: 25.6px;
  }
}
@media (min-width: 47em) {
  .debug {
    width: 80px;
    height: 32px;
  }
}
@media (min-width: 124em) {
  .debug {
    width: 40px;
    height: 16px;
  }
}
@media (min-width: 40em) and (max-width: 47em) {
  .debug {
    color: blue;
  }
}