Improvement of SassMeister-input.scss file at https://gist.github.com/micahgodbolt/5851228

jslegers-responsive-mixin.scss

/*
  Scoped Media Query Mixins - an element query workaround.

  @mixin respond-to-all : generates @media () {}
  @mixin respond-to-screen : generates @media screen and () {}
  @mixin respond-to-screen-only : generates @media screen only and () {}


  Accepts the following input :

  * $width
  * $width, $width, $width, ...
  * ($width, $class)
  * ($width, $class), ($width, $class), ...
  * (($width, $widthType), ($width, $widthType), ...)
  * (($width, $widthType), $class)
  * (($width, $widthType), $class)), (($width, $widthType), $class)), ...
  * any combination of the above

  "(($width, $widthType))" isn't supported because SCSS automaticly flattens the list to "($width, $widthType)", which doesn't allow the code to distinguish it from ($width, 

$class).
  [c]2013 @micahgodbolt, @jpavon, @filamentgroup and @johnslegers. MIT License.
*/

// Dynamically generate a media query of type $media
@mixin media($parameter, $value, $media : null) {
  @if $media == null {
    @media (#{$parameter}: #{$value}) {
        @content;
    }
  } @else if $media == 'screen' {
    @media screen and (#{$parameter}: #{$value}) {
        @content;
    }
  } @else if $media == 'screen only' {
    @media screen only and (#{$parameter}: #{$value}) {
        @content;
    }
  }
}

// Prefix media query with a class of your choice
@mixin mediaQuery($type, $parameter, $value, $query) {
    @include media(#{$parameter}, #{$value}, $type) {
        $length: length($query);
        @if ( $length > 1 ) {
            @for $i from 2 through $length {
                $class : nth($query, $i);
                #{$class} {
                    @content;
                }
            }
        } @else {
            @content;
        }
    }
}


// Generate media query of type $media
@mixin respond-to($media, $queries...) {
    @each $query in $queries {
        $width : nth($query, 1);
        $parameter : 'min-width';
        $value : $width;
        $lengthwidth : length($width);
        @if($lengthwidth > 1){
            $parameter : nth($width, 2);
            $value : nth($width, 1);
        } @else {
            $parameter : 'min-width';
            $value : $width;
        }
        @include mediaQuery($media, $parameter, $value, $query) {
            @content;
        }
    }
}

@mixin respond-to-all($queries...) {@include respond-to(null, $queries...){@content;}}
@mixin respond-to-screen($queries...) {@include respond-to('screen', $queries...){@content;}}
@mixin respond-to-screen-only($queries...) {@include respond-to('screen-only', $queries...){@content;}}

EXAMPLE :

@include respond-to-screen((32em, '.content'), (60em), (90em, aside, main)) {
    .schedule-component {
        float: left; 
        width: 100%;
        position:relative; 
    }
    .schedule-component ul,
    .schedule-component li {
       list-style: none;
       position: absolute;
       margin: 0;
       padding: 0;
    }
}

@include respond-to-all(((32em, 'max-width'), '.tab'), ((64em, 'max-width'), '.tab', '.menu')) {
    li {
        width:100%; 
    }
}

OUTPUT :

@media screen and (min-width: 32em) {
  .content .schedule-component {
    float: left;
    width: 100%;
    position: relative;
  }
  .content .schedule-component ul,
  .content .schedule-component li {
    list-style: none;
    position: absolute;
    margin: 0;
    padding: 0;
  }
}
@media screen and (min-width: 60em) {
  .schedule-component {
    float: left;
    width: 100%;
    position: relative;
  }

  .schedule-component ul,
  .schedule-component li {
    list-style: none;
    position: absolute;
    margin: 0;
    padding: 0;
  }
}
@media screen and (min-width: 90em) {
  aside .schedule-component {
    float: left;
    width: 100%;
    position: relative;
  }
  aside .schedule-component ul,
  aside .schedule-component li {
    list-style: none;
    position: absolute;
    margin: 0;
    padding: 0;
  }

  main .schedule-component {
    float: left;
    width: 100%;
    position: relative;
  }
  main .schedule-component ul,
  main .schedule-component li {
    list-style: none;
    position: absolute;
    margin: 0;
    padding: 0;
  }
}
@media (max-width: 32em) {
  .tab li {
    width: 100%;
  }
}
@media (max-width: 64em) {
  .tab li {
    width: 100%;
  }

  .menu li {
    width: 100%;
  }
}