$tablet: 640px; $desktop: 1024px;
@mixin media-query($argsā¦) {
$media-type: 'only screen'; $media-type-key: 'media-type'; $args: keywords($args); $expr: ''; @if map-has-key($args, $media-type-key) { $media-type: map-get($args, $media-type-key); $args: map-remove($args, $media-type-key); } @each $key, $value in $args { @if $value { $expr: "#{$expr} and (#{$key}: #{$value})"; } } @media #{$media-type} #{$expr} { @content; }
}
@mixin mobile() {
$max: $tablet - 1; @include media-query($max-width: $max) { @content; }
}
@mixin tablet() {
$max: $desktop - 1; @include media-query($max-width: $max) { @content; }
}
@mixin tablet-only() {
$min: $tablet; $max: $desktop - 1; @include media-query( $min-width: $min, $max-width: $max ) { @content; }
}