Skip to content

Instantly share code, notes, and snippets.

@danbru1989
Created November 2, 2017 00:00
Show Gist options
  • Save danbru1989/d600cddd8eab83b584aee19d153591df to your computer and use it in GitHub Desktop.
Save danbru1989/d600cddd8eab83b584aee19d153591df to your computer and use it in GitHub Desktop.
/* ========== PLACE GENERAL MEDIA QUERY CODE HERE ========== */
/* ===== Breakpoints ===== */
$break-point-xs : 1px;
$break-point-s : 320px;
$break-point-ms : 480px;
$break-point-ml : 600px;
$break-point-l : 768px;
$break-point-xl : 1024px;
$break-point-xxl : 1200px;
$break-point-xxxl : 1600px;
/* ===== Media Queries ===== */
@mixin mq($break-point) { // Use @include mq(xs) {} for widths of 1px through 320px
@if $break-point == "xs" {
@media (min-width: #{$break-point-xs}) and (max-width: #{$break-point-s}) {
@content;
}
}
@else if $break-point == "s" { // Use @include mq(s) {} for widths of 321px through 479px
@media (min-width: #{$break-point-s +1}) {
@content;
}
}
@else if $break-point == "ms" { // Use @include mq(ms) {} for widths of 480px through 599px
@media (min-width: #{$break-point-ms}) {
@content;
}
}
@else if $break-point == "ml" { // Use @include mq(ml) {} for widths of 600px through 767px
@media (min-width: #{$break-point-ml}) {
@content;
}
}
@else if $break-point == "l" { // Use @include mq(s) {} for widths of 768px through 1023px
@media (min-width: #{$break-point-l}) {
@content;
}
}
@else if $break-point == "xl" { // Use @include mq(s) {} for widths of 1024px through 1199px
@media (min-width: #{$break-point-xl}) {
@content;
}
}
@else if $break-point == "xxl" { // Use @include mq(s) {} for widths of 1200px or greater
@media (min-width: #{$break-point-xxl}) {
@content;
}
}
@else if $break-point == "xxxl" { // Use @include mq(s) {} for widths of 1600px or greater
@media (min-width: #{$break-point-xxxl}) {
@content;
}
}
@else {
@error "Whoops! No media query value could be retrieved with #{$break-point}"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment