SCSS Responsive Mixin

gistfile1.scss

// breakpoints
$break-small: 400px;
$break-large: 1024px;

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

// usage examples: @include respond-to(handle)
//  @include respond-to(handhelds) { width: 100% ;}
//  @include respond-to(medium-screens) { width: 125px; }
//  @include respond-to(wide-screens) { float: none; }