Generated by SassMeister.com.

SassMeister-input.scss

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

//--------------------------------------//
// Media queries
//--------------------------------------//
$breakpoints: (
    "s":     (min-width, 48em),
    "m":     (min-width, 50em),
    "l":     (min-width, 64em),
    "xl":    (min-width, 90em),
    "xxl":   (min-width, 105em)
) !default;

// Make the breakpoints
@mixin bp($breakpoint) {
    $query: map-get($breakpoints, $breakpoint);

    @if $query != null {
        @media (#{nth($query, 1)}: #{nth($query, 2)}) {
            @content;
        }
    } @else {
        @warn "Unfortunately, no value could be retrieved from #{$breakpoint}. "
        + "Please make sure it is defined in `$breakpoints` map.";
    }
}

//--------------------------------------//
// Here's the sauce, this jugs the BPs
// name (key) into an `:after` and the
// value to `:before` pseudo elements.
// Now, we can read that with JavaScript.
//--------------------------------------//
@mixin bp2js($default) {

    // One of the BPs has to be the default, meaning that it's on when
    // there's no BP affecting. In the min breakpoint mobile first approach,
    // the default would be the smallest BP.
    &:before {
        $foo: map-get($breakpoints, $default);
        display: none;
    }

    &:after {
        content: '#{$default}';
        display: none;
    }

    @each $point, $dim in $breakpoints {
        @if $default != $point {
            @include bp(#{$point}) {
                &:after {
                    content: '#{$point}';
                }

                &:before {
                    content: '#{nth($dim, 2)}';
                }
            }
        }
    }

    @content;
}

// Test it out
body {
  @include bp2js('s');
}

SassMeister-output.css

body:before {
  display: none;
}
body:after {
  content: "s";
  display: none;
}
@media (min-width: 50em) {
  body:after {
    content: "m";
  }
  body:before {
    content: "50em";
  }
}
@media (min-width: 64em) {
  body:after {
    content: "l";
  }
  body:before {
    content: "64em";
  }
}
@media (min-width: 90em) {
  body:after {
    content: "xl";
  }
  body:before {
    content: "90em";
  }
}
@media (min-width: 105em) {
  body:after {
    content: "xxl";
  }
  body:before {
    content: "105em";
  }
}