Advanced breakpoints with Sass

I like to use the fantastic Breakpoint Gem and Compass plugin along with Girder. Breakpoint() includes everything I need to make simple and more advanced min/max queries in my stylesheets. Here's how to get started with it including some basic examples.

Install the breakpoint gem and make sure its included in your project's config.rb:
gem install breakpoint

Activate the options in _girder.scss

$use-breakpoint: true;
@import "breakpoint";

Start using it by passing a breakpoint value to the mixin like this:

// Basic media queries, min-width and min/max width
$min-breakpoint: 568px;
$minmax-breakpoint: 320px $min-breakpoint;

.container {
  content: 'No Media Queries';

  @include breakpoint($min-breakpoint) {
    content: 'Min-Breakpoint Media Query';
  }
  @include breakpoint($minmax-breakpoint) {
    content: 'MinMax-Breakpoint Media Query';
  }
}

The resulting CSS:

.container {
  content: 'No Media Queries';
}
@media (min-width: 568px) {
  .container {
      content: 'Min-Breakpoint Media Query';
    }
}
@media (min-width: 20em) and (max-width: 568px) {
  .container {
      content: 'MinMax-Breakpoint Media Query';
    }
}

Checking orientation or pixel density could be done like this:

// More advanced media queries
$min-orientation: screen 35.5em (orientation portrait);
$min-resolution: min-resolution 1.5dppx;

.container {
  content: 'No Media Queries';

  @include breakpoint($min-orientation) {
    content: 'Orientation Media Query';
  }
  @include breakpoint($min-resolution) {
    content: 'Resolution Media Query';
  }
}

The resulting CSS:

.container {
  content: 'No Media Queries';
}
@media screen and (min-width: 35.5em) and (orientation: portrait) {
  .container {
      content: 'Orientation Media Query';
    }
}
/* Breakpoint transforms the dppx unit for better browser support */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .container {
      content: 'Resolution Media Query';
    }
}