Abstracted Mixins for Responsive Sass (Desktop First)

_layout-scaffolding.scss

@include 'compass';
@include 'breakpoint';

//
// Note all breakpoints are specified in Pixels, but Breakpoint will convert this to EMs for us.
//

$breakpoint-to-ems: true;

@mixin at-mobile-breakpoint() {
  @include breakpoint(320px, 768px) {
    @content;
  }
}

@mixin at-tablet-breakpoint() {
  @include breakpoint(768px, 1024px) {
    @content;
  }
}

// Desktop is Default Style

@mixin at-large-desktop-breakpoint() {
  @include breakpoint(1200px) {
    @content;
  }
}