Skip to content

Instantly share code, notes, and snippets.

@hasanTheBest
Created May 10, 2018 14:15
Show Gist options
  • Save hasanTheBest/aeb486f94a6cb5c0244dc892ef0d3cb4 to your computer and use it in GitHub Desktop.
Save hasanTheBest/aeb486f94a6cb5c0244dc892ef0d3cb4 to your computer and use it in GitHub Desktop.
min-width for mq-w() and max-height for mq-h() are default value. We can use number [320px], variable[$md] or operator[ $md - .02 ] as parameter of mq-w() or mq-h(). If we want explicit max-width and min-height for mq-w() and mq-h() respectively, we need to set value [$limit : max or min] as second parameter of that mixin.]
### breakpoints(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) ###
# Variables
$xs: 0px;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
# Width
@mixin mq-w($val, $limit: min ){
@media(#{$limit}-width: $val){
@content;
}
}
# Height
@mixin mq-h($val, $limit: max ){
@media(#{$limit}-height: $val){
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment