levinelson

.your-element {
 
    // Default mobile-first styles here
    
    @include respond(9) {
        // Styles for screens from 900px on up
    }
    
    @include respond(11, ie) {
        // Styles for screens from 1100px on up AND IE8

levinelson

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

levinelson

// 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 {