Bourbon neat multiple breakpoints

Question

I know following can be done in bourbon neat:

$mobile: new-breakpoint(max-width: 320px);
$tablet: new-breakpoint(max-width:760px min-width:321px);
$desktop: new-breakpoint(min-width: 761px);

then I can do something like this:

@include media($mobile) {
    // some styling
}

It works great. Now I have to add styles that affects mobile and tablet. I am looking for union of mobile and tablet breakpoint.

//desired behavior 
//I know this is not available. Just made up
@include media($mobile, $tablet) {
    // some styling.
    // this should be applied to mobile and tablet
}

Answer 1

Not sure if anyone is still needing this but I made a following function:

@mixin multiple-media($media...) {
  @each $query in $media {
    @include media($query) {
      @content
    }
  }
}

that works for me just fine.

@include multiple-media($mobile-landscape, $tablet-portrait, $tablet-landscape, $laptop, $desktop) {
  .mobile {
    @include display(none);
  }
}

Produces

@media screen and (min-width: 29.25em) and (max-width: 48em) and (max-height: 29.25em) {
  .logo a .mobile {
    display: none; } }
@media screen and (min-width: 29.25em) and (max-width: 50em) and (min-height: 29.25em) {
  .logo a .mobile {
    display: none; } }
@media screen and (min-width: 48em) and (max-width: 80em) and (max-height: 50em) {
  .logo a .mobile {
    display: none; } }
@media screen and (min-width: 80em) and (max-width: 105em) {
  .logo a .mobile {
    display: none; } }
@media screen and (min-width: 105em) {
  .logo a .mobile {
    display: none; } }

Answer 2

If you want to target mobile and tablet for a specific style, I think your best option would be create a new breakpoint:

$mobile-to-tablet: new-breakpoint(max-width:760px min-width:321px $cols);

And add under this breakpoint all your specific css.