Multiple media queries in SASS

When it comes to screen size logic SASS plays a big role in tidying up functions with conditional logic. Here’s an example to use that logic.

@mixin phone {
  @media /*conditions*/ {
    @content
  }
}

@mixin tablet {
  @media /*conditions*/ {
    @content
  }
}

@mixin desktop {
  @media /*conditions*/ {
    @content
  }
}

@mixin media($keys...) {
  @each $key in $keys {
    @if ($key == phone) {
      @include phone {
        @content
      }
    } @else if ($key == tablet) {
      @include tablet {
        @content
      }
    } @else if ($key == desktop) {
      @include desktop {
        @content
      }
    }
  }
}

Usage:

@include media(phone, tablet, desktop) {
  // your scss code
}

@include media(tablet, desktop) {
  // your scss code
}

@include media(phone) {
  // your scss code
}

// and so on...