screen-sizes.scss

@mixin screen-sizes($sizes...) {
  $media-query: "only screen and";
  $query: nil;
  @if length($sizes) == 1 {
      $size: nth($sizes, 1);
      @if $size == small {
        $query: "#{small-screen(start)} AND #{small-screen(end)}";
      } @else if $size == medium {
        $query: "#{medium-screen(start)} AND #{medium-screen(end)}";
      } @else if $size == large {
        $query: "#{large-screen(start)} AND #{large-screen(end)}";
      } @else if $size == mobile {
        $query: "#{mobile-screen(start)} AND #{mobile-screen(end)}";
      }
      $media-query: $media-query + " " + $query;
  } @else {
    @for $index from 1 through length($sizes) {
      $size: nth($sizes, $index);
      $state: nil;

      @if $index == 1 {
        $state: start;
      } @else if $index < length($sizes) {
        $state: middle;
      } @else {
        $media-query: $media-query + " and ";
        $state: end;
      }

      @if $size == small {
        $query: small-screen($state);
      } @else if $size == medium {
        $query: medium-screen($state);
      } @else if $size == large {
        $query: large-screen($state);
      } @else if $size == mobile {
        $query: mobile-screen($state);
      }
      $media-query: $media-query +  " " + $query;
    }
  }

  @debug $media-query;

  @media #{$media-query} {
    @content;
  }
}

@function large-screen($state){
  @if $state == start {
    @return "(min-width: #{$medium-screen-size+1px})";
  } @else if $state == end {
    @return "(max-width: #{$large-screen-size})";
  } @else {
    @return "";
  }
}

@function medium-screen($state){
  @if $state == start {
    @return "(min-width: #{$small-screen-size+1px})";
  } @else if $state == end {
    @return "(max-width: #{$medium-screen-size})";
  } @else {
    @return "";
  }
}

@function mobile-screen($state){
  @if $state == start {
    @return "(min-width: 1px)";
  } @else if $state == end {
    @return "(max-width: #{$mobile-screen-size})";
  } @else {
    @return "";
  }
}

@function small-screen($state){
  @if $state == start {
    @return "(min-width: #{$mobile-screen-size+1px})";
  } @else if $state == end {
    @return "(max-width: #{$small-screen-size})";
  } @else {
    @return "";
  }
}