Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/niksy/sass-scoped-media-query
Scope CSS styles and apply them only inside provided selector and media query pairs.
https://github.com/niksy/sass-scoped-media-query
Last synced: about 2 months ago
JSON representation
Scope CSS styles and apply them only inside provided selector and media query pairs.
- Host: GitHub
- URL: https://github.com/niksy/sass-scoped-media-query
- Owner: niksy
- License: mit
- Created: 2016-08-21T08:45:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-23T11:15:41.000Z (4 months ago)
- Last Synced: 2024-10-18T03:48:09.123Z (2 months ago)
- Language: SCSS
- Size: 9.77 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://www.filamentgroup.com/lab/element-query-workarounds.html).
## Install
```sh
npm install sass-scoped-media-query --save
```
## Usage
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;
}
}
```
## 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](http://caniuse.com/#feat=css-mediaqueries) are
supported.
## References
- Originally based on
[Filament Group’s project](https://github.com/filamentgroup/scoped-media-query),
but completely refactored to be more flexible.
## License
MIT © [Ivan Nikolić](http://ivannikolic.com)
[ci]: https://travis-ci.org/niksy/sass-scoped-media-query
[ci-img]: https://img.shields.io/travis/niksy/sass-scoped-media-query.svg