// Breakpoint Mixin // —————- // writing out CSS media queries by hand is a pain, // to write awesome media queries, simply @include this mixin // // Example: // @include breakpoint(key-word) { // write your code here // } //
@mixin breakpoint($val) {
@if $val == "small" { @media (min-width: $small-breakpoint) { @content; } } @else if $val == "small-only" { @media (min-width: $small-breakpoint) and (max-width: $medium-breakpoint) { @content; } } @else if $val == "small-down" { @media (max-width: $medium-breakpoint) { @content; } } @else if $val == "medium" { @media (min-width: $medium-breakpoint) { @content; } } @else if $val == "medium-only" { @media (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) { @content; } } @else if $val == "medium-down" { @media (max-width: $large-breakpoint) { @content; } } @else if $val == "medium" { @media (min-width: $medium-breakpoint) { @content; } } @else if $val == "medium-only" { @media (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) { @content; } } @else if $val == "medium-down" { @media (max-width: $large-breakpoint) { @content; } } @else if $val == "large" { @media (min-width: $large-breakpoint) { @content; } } @else if $val == "large-only" { @media (min-width: $large-breakpoint) and (max-width: $xlarge-breakpoint) { @content; } } @else if $val == "large-down" { @media (max-width: $xlarge-breakpoint) { @content; } } @else if $val == "xlarge" { @media (min-width: $xlarge-breakpoint) { @content; } } @else if $val == "xlarge-only" { @media (min-width: $xlarge-breakpoint) and (max-width: $xxlarge-breakpoint) { @content; } } @else if $val == "xlarge-down" { @media (max-width: $xxlarge-breakpoint) { @content; } } @else if $val == "xxlarge" { @media (min-width: $xxlarge-breakpoint) { @content; } } @else { @media #{$val} { @content; } }
}