Another stab at Filament Group's Element Query challenge.

SassMeister-input.scss

// ---
// Sass (v3.2.9)
// ---


@mixin respond-to($queries...) {
    $length: length($queries);
    @for $i from 1 through $length{
        @if $i % 2 == 1 {
            @media screen and (min-width: nth($queries, $i)) { 
                #{nth($queries, $i+1)} {
                  @content;
                }
            }
        }
    }
}


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

SassMeister-output.css

@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: 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;
  }
}

@scottjehl @micahgodbolt @jpavon -

• A repo would be magnificent!
• I saw two days ago and would love to have more people see this!! It works great!

repo is here: https://github.com/filamentgroup/scoped-media-query

Can cross off "Have @paulirish comment on my gist" from my bucket list.

I created a variation that allows 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

Only "(($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). I posted an issue reporting this at sass/sass#859 .

SCSS code :

@mixin screen($parameter, $value, $query) {
    @media screen and (#{$parameter}: #{$value}) {
        $length: length($query);
        @if ( $length > 1 ) {
            @for $i from 2 through $length {
                $class : nth($query, $i);
                #{$class} {
                    @content;
                }
            }
        } @else {
            @content;
        }
    }
}

@mixin respond-to($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 screen($parameter, $value, $query) {
            @content;
        }
    }
}

@include respond-to((32em, '.content'), (60em), ((72em,'max-width'),'.test'), (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;
    }
}

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 (max-width: 72em) {
  .test .schedule-component {
    float: left;
    width: 100%;
    position: relative;
  }
  .test .schedule-component ul,
  .test .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;
  }
}

See also https://gist.github.com/jslegers/6048554#file-jslegers-responsive-mixin-scss