sass-scoped-media-query

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:

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

@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

• Originally based on Filament Group’s project, but completely refactored to be more flexible.

License

MIT © Ivan Nikolić