-
-
Save culttm/514dd9b84518a7f0a842 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin breakpoint($min: 0, $max: 0) { | |
$type: type-of($min); | |
@if $type == string { | |
@if $min == xs { | |
@media (max-width: 767px) { @content; } // Mobile Devices | |
} | |
@else if $min == sm { | |
@media (min-width: 768px) { @content; } // Tablet Devices | |
} | |
@else if $min == md { | |
@media (min-width: 992px) { @content; } // Desktops | |
} | |
@else if $min == lg { | |
@media (min-width: 1200px) { @content; } // Widescreen Desktops | |
} | |
// Otherwise pass a warning to the compiler as to the appropriate options | |
@else { | |
@warn "The breakpoint mixin supports the following attributes: xs, sm, md, lg"; | |
} | |
} | |
@else if $type == number { | |
// Allow for custom parameters for min and max size | |
$query: "all" !default; | |
@if $min != 0 and $max != 0 { $query: "(min-width: #{$min}) and (max-width: #{$max})"; } // set both min and max | |
@else if $min != 0 and $max == 0 { $query: "(min-width: #{$min})"; } // set just min | |
@else if $min == 0 and $max != 0 { $query: "(max-width: #{$max})"; } // set just max | |
@media #{$query} { @content; } | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment