gistfile1.sass

//
// Mixin for inline responsive design
//
$smallScreen    : 768px;
$mediumScreen   : 992px;
$largeScreen    : 1200px;


@function smallerThan($breakPoint) {
  @return "screen and (min-width:" + $breakPoint + ")";
}

@function largerThan($breakPoint) {
  @return "(max-width:" + $breakPoint + ")";
}

@mixin forScreen($size) {

  @if $size == $smallScreen {
    @media #{smallerThan($mediumScreen)} and #{largerThan($smallScreen)} {
      @content;
    }
  }

  @if $size == $mediumScreen {
    @media #{smallerThan($mediumScreen)} {
      @content;
    }
  }

  @if $size == $largeScreen {
    @media #{smallerThan($largeScreen)} {
      @content;
    }
  }

}