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.

Answer 3

This is not a Bourbon-related answer, but anyway.

There's a Compass extension that does exactly what you want: Breakpoint Slicer.

You just set up your breakpoints like this:

$slicer-breakpoints: 0 320px 760px;
// Slices:           | 1 |  2  |  3  →

And then just address the gaps between breakpoints (called "slices") with the short at, from, to and between mixins. For example, @include at(2) will set a min-width: 320px, max-width: 760px media query.

With the ecosystem of numerous powerful Compass extension there's really no reason to go drunk with Bourbon. For a powerful semantic grid, use Singularity, it integrates well with Breakpoint and Breakpoint Slicer.