Sharing CSS breakpoints with JavaScript - SCSS

bpExport.scss

@import "breakpoint";

// loop through the map and add the breakpoints
@mixin add-bp($bps) {
  @each $bp-name, $bp in $bps {
    @include add-breakpoint($bp-name, $bp);
  }
}

// loop through the map and set `content`
@mixin bp-export($bps : $site-breakpoints) {
  display: none; // Prevent from displaying, including in chrome inspect!
  @each $bp-name, $setting in $bps {
    @include respond-to($bp-name) {
      content: $bp-name;
    }
  }
}

// not required, but shows how conversion to ems makes breakpoint sizes "indefinite"
@include breakpoint-set('to ems', true);