Sharing CSS breakpoints with JavaScript - Demo SCSS

bpExport.demo.scss

// set our site's breakpoints
$site-breakpoints: (
  "small": 320px,
  "medium": 460px,
  "large": 969px,
  "x-large": 1061px,
  "xx-large": 1284px
);

@include add-bp($site-breakpoints);
// now apply to body:before
body:before {
  @include bp-export();
}


// if you have other breakpoints you use elsewhere, you can use those too
$my-div-breakpoints: (
  "too-small": 480px,
  "just-right": 720px,
  "too-big": 1200px
);

// sets the breakpoint to those in the map
@include add-bp($my-div-breakpoints);
// now apply to my div
.my-div:before {
  @include bp-export($my-div-breakpoints)
}


// not functional, just make it look nice
.my-color-div {
  height: 50px;
  width: 50px;
}