named-media-queries.scss

// MEDIA QUERY BUBBLING ------------------------------------------ //

// SCSS
.sidebar {
    width: 300px;
    @media screen and (min-width: 1000px) {
        width: 500px;
    }
}
/* OUTPUT - Same as CSS */
.sidebar {
     width: 300px;
}

@media screen and (min-width: 1000px) {
    .sidebar {
        width: 500px;
    }
}




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

// Define your breakpoint sizes; these are based on min-width MQ's
// e.g. tiny is 0-499px
$tiny: 0;
$small: 500px;
$medium: 1000px;
$large: 1300px;


// Breakpoint Mixin
@mixin breakpoint($media) {
    // if the media is 'tiny'
    @if $media == tiny {
        // define mediaquery with variable
        @media only screen and (min-width: $tiny) {
            // print content CSS
            @content;
        }
    }

    @else if $media == small {
        // small and medium are 1px smaller than their previous variable
        @media only screen and (min-width: $small - 1) {
            @content;
        }
    }

    @else if $media == medium {
        @media only screen and (min-width: $medium - 1) {
            @content;
        }
    }

    @else if $media == large {
        @media only screen and (min-width: $large) {
            @content;
        }
    }

}



// Use in your Stylesheets
.page-wrap {
    @include breakpoint(tiny) { width: 95%; } // at 0 to 499px
    @include breakpoint(small) { width: 80%; } // at 500px to 999px
    @include breakpoint(medium) { width: 70%; } // at 1000px to 1299px
    @include breakpoint(large) { width: 60%; } // 1300px and up
}