Miss any of our Open RFC calls?Watch the recordings here! »

sass-scoped-media-query

1.0.0 • Public • Published

sass-scoped-media-query

Build Status

Scope CSS styles and apply them only inside provided selector and media query pairs.

"Hacky" workaround for element queries.

Install

npm install sass-scoped-media-query --save

Usage

Input:

@import 'sass-scoped-media-query/index';
 
@include scoped-media-query(('screen and (min-width: 500px)', '.jasper')) {
 
    .gizmo {
        color: #f00;
    }
}
 
@include scoped-media-query( 
    ('screen and (min-width: 500px)', '.gigi'), 
    ('screen and (min-width: 1000px)', '.lola'),
{
 
    .gunner {
        font-family: 'Helvetica'sans-serif;
    }
}

Output:

@media screen and (min-width: 500px) {
    
    .jasper .gizmo {
        color: #f00;
    }
}
 
@media screen and (min-width: 500px) {
    
    .gigi .gunner {
        font-family: 'Helvetica'sans-serif;
    }
}
 
@media screen and (min-width: 1000px) {
    
    .lola .gunner {
        font-family: 'Helvetica'sans-serif;
    }
}

API

mixin(mediaQuery)

Returns scoped CSS styles based on selector and media query pair.

mediaQuery

Type: sass.types.List

List of selector and media query pairs.

Browser support

Works where media queries are supported.

References

License

MIT © Ivan Nikolić

Install

npm i sass-scoped-media-query

DownloadsWeekly Downloads

20

Version

1.0.0

License

MIT

Last publish

Collaborators

  • avatar