Scss responsive mixin

Scss-responsive-mixin

/* Devices sizes */
$tablet-width: 768px;
$mobile-width: 420px;

/* Responsive breakpoints */
$break-small: $mobile-width;
$break-large: $tablet-width;

@mixin respond-to($media) {
  @if $media == mobile {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $media == tablet {
    @media only screen and (max-width: $break-large - 1) { @content; }
  }
  @else if $media == desktop {
    @media only screen and (min-width: $break-large) { @content; }
  }
}

Scss-responsive-mixin-usage

a {
  margin: 0;
  @include respond-to(tablet) { margin: 0 20px 0 0; }
  @include respond-to(mobile) { margin: 0 0 10px 0; }
}