No Query Fallbacks

Breakpoint allows you to write fallbacks for your media queries very easily with a multitude of different options for spitting out the CSS. You can either include a no-query option at the end of your media query definition, or you can do it by passing in the no-query parameter to the breakpoint mixin.

Wrapping Classes, Same File

Writing your media queries with fallback wrapper classes in the same file is easy to do. Add a class you'd like to your fallback, and set $breakpoint-no-query-wrappers: true to print all of the no-query wrappers, or $breakpoint-no-query-wrappers: '.class' to print out only the fallback class you'd like.

$breakpoint-no-query-wrappers:  true;

$touch: pointer coarse, 'no-query' '.touch';
$no-queries: 678px;

#foo {
  @include breakpoint($touch) {
    content: 'Touch Device';
  }
  @include breakpoint($no-queries, '.no-mqs') {
    content: 'No Media Queries';
  }
}

@media (pointer: coarse) {
  #foo {
    content: 'Touch Device';
  }
}
.touch #foo {
  content: 'Touch Device';
}
@media (min-width: 678px) {
  #foo {
    content: 'No Media Queries';
  }
}
.no-mqs #foo {
  content: 'No Media Queries';
}