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
}

Isn't just specifying $tablet enough, $tablet encompasses $mobile, according to your break-point definitions. — dezman, Jun 12 '13 at 20:11
I am sorry; I forgot to mention min-width on tablet breakpoint. There is min-width breakpoint on tablet. — emphaticsunshine, Jun 12 '13 at 20:23
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. — dezman, Jun 12 '13 at 20:24
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. — emphaticsunshine, Jun 12 '13 at 20:30
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. — dezman, Jun 12 '13 at 20:31
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. — emphaticsunshine, Jun 12 '13 at 20:36
@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. — Pure Function, Nov 27 '13 at 00:29

score 5 · Accepted Answer · answered Nov 09 '15 at 15:33

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

score 3 · Answer 2 · answered Mar 30 '15 at 11:19

3

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.

answered Mar 30 '15 at 11:19

NumanWD

31
3

score 0 · Answer 3 · answered Jun 13 '13 at 20:06

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.

Bourbon neat multiple breakpoints

3 Answers3