Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

README.md

Scoped Media Query Sass Mixin

Filament Group

An element query workaround. A Sass mixin for scoping CSS styles to apply only within given selector/media query pairs.

Addresses the problem explained in this article: http://filamentgroup.com/lab/element_query_workarounds/

Accepts sets of selector/media query pairs as arguments. Enclosed styles' selectors are prefixed by each passed selector within an outputted media query block.

©2013 @micahgodbolt, @jpavon, and @filamentgroup. MIT License.

The mixin:

@mixin scopedmediaquery($queries...) {
    $length: length($queries);
    @for $i from 1 through $length{
        @if $i % 2 == 1 {
            @media #{nth($queries, $i)} {
                #{nth($queries, $i+1)} {
                  @content;
                }
            }
        }
    }
}

Sample Usage:

  @include scopedmediaquery(
    '(min-width : 30em)', '.content',
    '(min-width : 90em)', 'aside'
  ) {
  /* breakpoint styles here */
  .schedule-component {
      float: left; 
      width: 100%;
      position:relative; 
  }
  .schedule-component ul,
  .schedule-component li {
    list-style: none;
    position: absolute;
    margin: 0;
    padding: 0;
  }
}

Sample Output:

@media (min-width: 30em) {
  .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 (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;
  }
}

About

An element query workaround. A Sass mixin for scoping CSS styles to apply only within given selector/media query pairs.

Resources

License

Releases

No releases published

Contributors 4

  •  
  •  
  •  
  •  

Languages

You can’t perform that action at this time.