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
}

Catchweight

Isn't just specifying $tablet enough, $tablet encompasses $mobile, according to your break-point definitions. – Whodunit

I am sorry; I forgot to mention min-width on tablet breakpoint. There is min-width breakpoint on tablet. – Catchweight

What is the point of doing this, media queries take very little space anyway. You might save two lines, but you will more likely add lines. – Whodunit

Do you mean that I should add a new breakpoint? I can do that but I was thinking if there was a way to specify 2 breakpoints together and it knows how to merge them. – Catchweight

What's the point of putting breakpoints in variables? You should just specify all the breakpoints you want the normal way. I can see maybe wanting to put the styles they contain in vars, but the breakpoints themselves, I don't really get the point. – Whodunit

Dude, its helpful. If for some reason, I need to change some pixels around breakpoints, I don't have to deal with changing them everywhere on stylesheets. Thats the basic explanation for using any variable. – Catchweight

@watson why use SASS at all?! DRY is the reason for using a variable.. anyway I need this multiple target stuff too. this is not a dumb question. – Totalitarian

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; } }

Matri

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.

Cystitis

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.

Ceram