Bourbon neat numerous breakpoints

Question

I know that in bourbon you can do the following:

$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 need to add styles that affect the mobile and tablet. I am looking for a combination of mobile and tablet breakpoints.

 //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 still needs this, but I made the following function:

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

which works for me very well.

 @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 devices and tablets to a specific style, I think your best option is to create a new breakpoint:

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

And add all your specific css to this breakpoint.

Answer 3

This is not an answer related to Bourbon, but in any case.

There is a Compass extension that does exactly what you want: A breakpoint switch .

You simply set your breakpoints as follows:

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

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

With the Compass’s massive powerful expansion ecosystem, there really is no reason to get drunk with Bourbon. For a strong semantic grid, use Singularity , it integrates well with Breakpoint and Slimming Slimming.