Sass RWD helpers

gistfile1.sass

// handhelds 
$break_small: 640px
// narrow-screeens 
$break_medium: 980px
// full-screens 
$break_large: 1400px
// wide-screens 
$break_extra_large: 1600px
// extra-wide-screens

// +respond-to(<screen size name>)
@mixin respond-to($media)
    @if $media == handhelds
        @media only screen and (max-width: $break_small)
            @content
    @else if $media == narrow-screens
        @media only screen and (min-width: $break_small + 1) and (max-width: $break_medium)
            @content

    @else if $media == full-screens
        @media only screen and (min-width: $break_medium + 1) and (max-width: $break_large)
            @content

    @else if $media == wide-screens
        @media only screen and (min-width: $break_large + 1)
            @content

    @else if $media == extra-wide-screens
        @media only screen and (min-width: $break_extra_large + 1)
            @content


// +respond-to-gt(<screen size name>)
// +respond-to-gt(<pixel width>)
@mixin respond-to-gt($media)
    @if $media == handhelds
        @media only screen and (min-width: $break_small + 1)
            @content
    @else if $media == narrow-screens
        @media only screen and (min-width: $break_medium + 1)
            @content

    @else if $media == full-screens
        @media only screen and (min-width: $break_large + 1)
            @content

    @else if $media == wide-screens
        @media only screen and (min-width: $break_extra_large + 1)
            @content
    @else
        @media only screen and (min-width: $media + 1)
            @content


// +respond-to-lt(<screen size name>)
// +respond-to-lt(<pixel width>)
@mixin respond-to-lt($media)
    @if $media == narrow-screens
        @media only screen and (max-width: $break_small)
            @content

    @else if $media == full-screens
        @media only screen and (max-width: $break_medium)
            @content

    @else if $media == wide-screens
        @media only screen and (max-width: $break_large)
            @content

    @else if $media == extra-wide-screens
        @media only screen and (max-width: $break_extra_large)
            @content

    @else
        @media only screen and (max-width: $media - 1)
            @content



// Displays the current media query at the top of the page.
// Adapted from http://johanbrook.com/design/css/debugging-css-media-queries/
//
// Add to body like so:
//
//     body.debug
//         +media-query-indicator
//
@mixin media-query-indicator
    &:after
        +respond-to(handhelds)
            content: "handhelds (< #{$break_small})"
            background: rgba(0,255,255, 0.9)
        +respond-to(narrow-screens)
            content: "narrow-screens (#{$break_small + 1} < #{$break_medium})"
            background: rgba(255,255,0, 0.9)
        +respond-to(full-screens)
            content: "full-screens (#{$break_medium + 1} < #{$break_large})"
            background: rgba(255,0,255, 0.9)
        +respond-to(wide-screens)
            content: "wide-screens (#{$break_large + 1} <)"
            background: rgba(255,255,255, 0.9)

        opacity: 0.5
        font-weight: bold
        display: block
        text-align: center
        position: absolute
        top: 0
        left: 0
        right: 0
        z-index: 99999