Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0-beta)
// ----

@import "sass-list-maps";

////////////////////////////////
// Breakpoints
$breakpoints: (
    ('small', ('min-width: 767px', 'max-width: 992px')),
    ('medium', ('min-width: 992px')),
    ('ipad-ls', ('min-device-width : 768px', 'max-device-width : 1024px', 'orientation: landscape')),
);

////////////////////////////////
// Breakpoints
@mixin respond-to($name, $media:screen) {
  
    @each $breakpoint in $breakpoints {

        $break: nth($breakpoint, 1);
        $points: nth($breakpoint, 2);
        $query: null;
        
        @if $break == $name {
          
            @for $i from 1 through length($points) {
              $point: if($i == 1, '('+nth($points, $i)+')', 'and ('+nth($points, $i)+')');
              $query: append($query, #{$point});
            }
            
            @media #{$media} and #{$query} {
              @content;
            }
        }
    }
}

.block {
  @include respond-to('small') {
    color: red;
  };
   @include respond-to('ipad-ls') {
    color: green;
  };
}

SassMeister-output.css

@media screen and (min-width: 767px) and (max-width: 992px) {
  .block {
    color: red; } }
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape) {
  .block {
    color: green; } }