$breakpoints: (
    mobile: 0px,
    smTablet: 500,
    tablet: 760,
    desktop: 1024
);

// if you inspect the body, you will notice that it now has CSS variables that reference your media queries
body {
    @each $key, $value in $breakpoints {
        --#{$key}: #{$value}
   }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.