Vanilla CSS media queries + Sass media queries mixin
//Basic list of media queries based on mobile-first approach:
@media only screen and (min-width:80em) {...} // 1280/16
@media only screen and (min-width:64em) {...} // 1024/16
@media only screen and (min-width:50em) {...} // 800/16
@media only screen and (min-width:48em) {...} // 768/16
@media only screen and (min-width:40em) {...} // 640/16
@media only screen and (min-width:30em) {...} // 480/16
@media only screen and (min-width:20em) {...} // 320/16
@media only screen and (min-width:17.5em) {...} // 280/16
/*
http://css-tricks.com/naming-media-queries/
Usage:
.selector {
width: 25%;
@include bp(S) {
width: 100%;
}
}
*/
@mixin bp($point) {
@if $point == XL { // 1024/16
@media (min-width: 64em) { @content; }
}
@else if $point == L { // 768/16
@media (min-width: 48em) { @content; }
}
@else if $point == M { // 640/16
@media (min-width: 40em) { @content; }
}
@else if $point == S { // 480/16
@media (min-width: 30em) { @content; }
}
@else if $point == XS { // 320/16
@media (min-width: 20em) { @content; }
}
}