A simple and basic SASS media query breakpoint mixin.

gistfile1.scss

// Usages:
// div {
//   @include media(800px) {
//    ...
//   }
// }
//
// Or with a customized breakpoint:
// $tall: break(min-height 600px);
// div {
//   @include media($tall) {
//    ...
//   }
// }
// 
// Or a combination:
// $wide: break(min-width 800px);
// $tall: break(min-height 600px);
// div {
//   @include media($wide, $tall) {
//    ...
//   }
// }

@function break($query) {
  @if length($query) > 1 {
    @return nth($query, 1) + ': ' + nth($query, 2);
  }
  @return 'min-width: ' + $query;
}

@mixin media($viewports...) {
  $media-query: 'screen';
  
  @each $view in $viewports {
    $media-query: $media-query + ' and (' + $view +')';
  }
  
  @media #{$media-query} {
    @content;
  }
}