$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;
}

}