Media Queries in SASS 3.2

gistfile1.scss

// ------------------------------------------- //
//    MEDIA QUERIES   												 //
// ------------------------------------------- //

$breakSmall: 320px;
$breakMedium: 560px;
$breakLarge: 1024px;

@mixin respond-to($media) {
  @if $media == tiny-screens {
    @media only screen and (max-width: $breakSmall) { @content; }
  }
  @else if $media == small-screens {
    @media only screen and (min-width: $breakSmall + 1) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $breakMedium + 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $breakLarge) { @content; }
  }
}

/* In action: */

  ul {
    @include group;
    float: left;
    width: 100%;
    margin-bottom: 1.618em;
    
    /* Media Queries */
    @include respond-to(medium-screens) {
      float: right;
      margin-top: 2.618em;
    }
    @include respond-to(wide-screens) {
      float: right;
      margin-top: 2.618em;
    }
  }