Scope CSS styles and apply them only inside provided selector and media query pairs.
npm install sass-scoped-media-query[![Build Status][ci-img]][ci]
Scope CSS styles and apply them only inside provided selector and media query
pairs.
"Hacky" workaround for
element queries.
``sh`
npm install sass-scoped-media-query --save
Input:
`scss
@use 'sass-scoped-media-query' as *;
@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:
`css
@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;
}
}
`
Returns scoped CSS styles based on selector and media query pair.
#### mediaQuery
Type: sass.types.List`
List of selector and media query pairs.
Works where media queries are
supported.
- Originally based on
Filament Group’s project,
but completely refactored to be more flexible.
MIT © Ivan Nikolić
[ci]: https://travis-ci.org/niksy/sass-scoped-media-query
[ci-img]: https://img.shields.io/travis/niksy/sass-scoped-media-query.svg