Breakpoint Sass: Or Queries for Multiple Breakpoints

Question

I have a few breakpoints set:

$breakpoint-tiny : 0 767px;
$breakpoint-small : 768px 991px ;
$breakpoint-medium : 992px 1229px;
$breakpoint-large : 1230px;

I saw in the breakpoint docs

You can also write OR media queries, allowing you to write multiple different basic or compound media queries and have them apply if any of the sets of queries match.

What I'd like to do is use these or queries to target multiple breakpoints when needed in my code. For example:

@include breakpoint($breakpoint-medium, $breakpoint-large){
   .mobile-navigation{display: none;}
}

Is this possible?

Answer 1

You should pass one parameter (a list), instead of two.

Try this.

@include breakpoint(($breakpoint-medium, $breakpoint-large)) {
    .mobile-navigation{display: none;}
}

I've wrapped your comma separated variables with parentheses. Now Sass will see them as a one list, instead of two parameters.

Answer 2

There are no OR queries in compass breakpoints, in particular @include breakpoint(($breakpoint-medium, $breakpoint-large)) fails with:

WARNING: Responsive contexts are not available for or queries as which query to use is ambiguous. Please only use single context queries. Default context is used.

You can use OR queries with the plain css @media rules if you really need it.

The right solution is to not specify a max width for your breakpoints, only the min width. Then start writing your sites without breakpoints ("mobile first"). If layout needs to change at a certain width you @include breakpoint($brk) and change the layout for all widths larger than $brk. That way you never have to specify a list of intervals that the media query applies to.