sitewide breakpoints and media queries

$custom-breakpoints: (
    "small"     : 640px,
    "medium"    : 990px,
    "large"     : 1200px,
    "xlarge"    : 1600px,
);

// mixins
@mixin breakpoint( $size ) {
    @each $name,$width in $custom-breakpoints {
        @if $name == $size {
            @media screen and (max-width: $width) {
                @content;
            }
        }
    }
}

// use like this:
//
// @include breakpoint( 'small' ) {
//      header {
//          position: fixed;
//      }
// }