SCSS breakpoints mixin

_for-size.scss

@mixin for-size($range) {
  $mobile: 480px;
  $tablet: 768px;
  $desktop: 1280px;

  @if $range == mobile-only {
    @media screen and (max-width: #{$mobile - 1}) { @content; }
  } @else if $range == mobile {
    @media screen and (min-width: $mobile) { @content; }
  } @else if $range == tablet {
    @media screen and (min-width: $tablet) { @content; }
  }  @else if $range == tablet-only {
    @media screen and (max-width: #{tablet - 1}) { @content; }
  } @else if $range == desktop {
    @media screen and (min-width: $desktop) { @content; }
  } @else if $range == desktop-only {
    @media screen and (max-width: #{$desktop - 1}) { @content; }
  }
}

// Usage
.list {
  padding: 10px;
  
  @include for-size(desktop-only) {
    padding: 20px;
  }
}