Divvy media query implementation

_box.scss

.box {
  // base/"mobile" styles
}

.box--within--hand {
  @include media-query($BP--WITHIN--HAND) {
    // |---hand---| styles
  }
}

.box--starts-at--hand {
  @include media-query($BP--STARTS_AT--HAND) {
    // |---hand---> styles
  }
}

.box--ends-at--hand {
  @include media-query($BP--ENDS_AT--HAND) {
    // <---hand---| styles
  }
}

mixins_media-quries.scss

@mixin media-query ($MQ) {
  @media only screen and #{$MQ} {
    @content;
  }
}

vars_media-quries.scss

$VIEWPORT--HAND_START: 320px;
$VIEWPORT--HAND_END: 480px;

$VIEWPORT--LAP_START: $VIEWPORT--HAND_END + 1px;
$VIEWPORT--LAP_END: 768px;

$VIEWPORT--DESK_START: $VIEWPORT--LAP_END + 1px;
$VIEWPORT--DESK_END: 1400px;

$BP--WITHIN--HAND:    "(min-width: #{$VIEWPORT--HAND_START}) and (max-width: #{$VIEWPORT--HAND_END})";
$BP--STARTS_AT--HAND: "(min-width: #{$VIEWPORT--HAND_START})";
$BP--ENDS_AT--HAND:   "(max-width: #{$VIEWPORT--HAND_END})";

$BP--WITHIN--LAP:    "(min-width: #{$VIEWPORT--LAP_START}) and (max-width: #{$VIEWPORT--LAP_END})";
$BP--STARTS_AT--LAP: "(min-width: #{$VIEWPORT--LAP_START})";
$BP--ENDS_AT--LAP:   "(max-width: #{$VIEWPORT--LAP_END})";

$BP--WITHIN--DESK:    "(min-width: #{$VIEWPORT--DESK_START}) and (max-width: #{$VIEWPORT--DESK_END})";
$BP--STARTS_AT--DESK: "(min-width: #{$VIEWPORT--DESK_START})";
$BP--ENDS_AT--DESK:   "(max-width: #{$VIEWPORT--DESK_END})";

// We could also end up doing stuff like:
// $BP--PORTRAIT: (orientation:portrait);
// $BP--LANDSCAPE: (orientation:landscape);