respond.scss

// Creates breakpoints every 100px up to 1900

// Usage: respond(2)       makes a media query with min-width 200
//        respond(16, ie)  makes a media querey for 1600 on up AND IE8

@mixin respond($size, $ie:false) {

    $i: 1;

    @while $i < 19 {

        @if $size == $i {
            @media only screen and (min-width: #{$i*100}px) {
                @content;
            }
        }

        $i: $i + 1;

    }

    // If IE argument is passed in, apply the styles to pages with class .ie8
    @if $ie == ie {
        html.ie8 & {
            @content;
        }
    }

    // Apply ALL styles right away to old pages with .desktop-only class
    .desktop-only & {
        @content;
    }

}

// Example

.your-element {

    // Default mobile-first styles here
    
    @include respond(3) {
        // Styles for screens from 300px on up
    }
    
    @include respond(6, ie) {
        // Styles for screens from 600px on up AND IE8
    }
    
}