Named Media Queries Mixin
// MEDIA QUERIES
// Created by = Ricardo Zea
// Date = September 2014
// Usage:
// .selector {
// width: 25%;
// @include minw(641) {
// width: 100%;
// }
// }
//Mobile First
@mixin minw($point) {
@if $point == 321 {
@media (min-width: 20.06em) { @content; }
}
@else if $point == 401 {
@media (min-width: 25.06em) { @content; }
}
@else if $point == 481 {
@media (min-width: 30.06em) { @content; }
}
@else if $point == 521 {
@media (min-width: 32.56em) { @content; }
}
@else if $point == 581 {
@media (min-width: 36.31em) { @content; }
}
@else if $point == 601 {
@media (min-width: 37.56em) { @content; }
}
@else if $point == 641 {
@media (min-width: 40.06em) { @content; }
}
@else if $point == 701 {
@media (min-width: 43.81em) { @content; }
}
@else if $point == 769 {
@media (min-width: 48.06em) { @content; }
}
@else if $point == 801 {
@media (min-width: 50.06em) { @content; }
}
@else if $point == 901 {
@media (min-width: 56.31em) { @content; }
}
@else if $point == 961 {
@media (min-width: 60.06em) { @content; }
}
@else if $point == 1001 {
@media (min-width: 62.56em) { @content; }
}
@else if $point == 1141 {
@media (min-width: 71.31em) { @content; }
}
}
//Responsive
@mixin maxw($point) {
@if $point == 1140 {
@media (max-width: 76.125em) { @content; }
}
@else if $point == 1000 {
@media (max-width: 62.5em) { @content; }
}
@else if $point == 960 {
@media (max-width: 60em) { @content; }
}
@else if $point == 900 {
@media (max-width: 56.25em) { @content; }
}
@else if $point == 800 {
@media (max-width: 50em) { @content; }
}
@else if $point == 768 {
@media (max-width: 48em) { @content; }
}
@else if $point == 700 {
@media (max-width: 43.75em) { @content; }
}
@else if $point == 640 {
@media (max-width: 40em) { @content; }
}
@else if $point == 600{
@media (max-width: 37.5em) { @content; }
}
@else if $point == 580 {
@media (max-width: 36.25em) { @content; }
}
@else if $point == 520 {
@media (max-width: 32.5em) { @content; }
}
@else if $point == 480 {
@media (max-width: 30em) { @content; }
}
@else if $point == 400 {
@media (max-width: 25em) { @content; }
}
@else if $point == 320 {
@media (max-width: 20em) { @content; }
}
}