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.

no-query can be set to either true to have that fallback printed out without any wrapper, or it can be set to a class similar to .foo to have the class wrap your selector as in .foo selector. There are two variables that control what gets printed out, $breakpoint-no-queries (defaults to false) which determines whether or not to print your media queries, and $breakpoint-no-query-fallbacks (defaults to false) which determines how to print out your fallbacks.

Fallbacks in Original File

The easiest way to use no-query fallbacks is by having the fallback wrapped by a class in the same file as your media queries. This generally adds little additional CSS and makes maintenance much easier. If you would like to use this method, you need to use classes for no-query, otherwise your CSS won't cascade properly.

// Will print No Query Fallbacks
$breakpoint-no-query-fallbacks: true;

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

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

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

Separate Fallback File

When working with fallbacks in different files, one of the things you need to keep in mind is that whatever your base styles are that get imported are going to be printed along with whatever your fallbacks are. This, unfortunately, is a limitation in Sass that we cannot avoid until @target lands, at which time be sure that we'll implement it as best we can.

The basics of this approach are easy, create a partial file that has your styling, including your media queries with no-query fallbacks, and then import that partial into files that will print out different items depending upon your settings. You can mix no-query with fallback classes and no-query without fallback classes (true) with this approach.

// _layout.scss
$touch: pointer coarse, 'no-query' '.touch';
$no-queries: 678px, 'no-query' true;

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

// style.scss
// Using the defaults, will print Media Queries, but not No Query Fallbacks.
@import "layout";

// fallback.scss
// Will not print media queries
$breakpoint-no-queries: true;
// Will print No Query Fallbacks
$breakpoint-no-query-fallbacks: true;

@import "layout";

/* style.css */
#foo {
  content: 'Basic Styling';
}
@media (pointer: coarse) {
  #foo {
    content: 'Touch Device';
  }
}
@media (min-width: 678px) {
  #foo {
    content: 'No Media Queries';
  }
}

/* fallback.css */
#foo {
  content: 'Basic Styling';
  content: 'No Media Queries';
}
.touch #foo {
  content: 'Touch Device';
}

Separate Fallback File, Specific Fallbacks

You can also specify which fallback class or classes (space or comma separated list of classes) you'd specifically like to target in a fallback file by setting $breakpoint-no-query-fallback to the class, or a list of classes, you'd like to use.

// _layout.scss
$touch: pointer coarse, 'no-query' '.touch';
$no-queries: 678px, 'no-query' '.no-mq';

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

// mqs.scss
// Using the defaults, will print Media Queries, but not No Query Fallbacks.
@import "layout";

// touch.scss
// Will not print media queries
$breakpoint-no-queries: true;
// Will print No Query Fallbacks
$breakpoint-no-query-fallbacks: '.touch';

@import "layout";

/* style.css */
#foo {
  content: 'Basic Styling';
}
@media (pointer: coarse) {
  #foo {
    content: 'Touch Device';
  }
}
@media (min-width: 678px) {
  #foo {
    content: 'No Media Queries';
  }
}

/* touch.css */
#foo {
  content: 'Basic Styling';
}
.touch #foo {
  content: 'Touch Device';
}