Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
75 lines (58 sloc) 1.55 KB
// 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
}