2.0.1 • Published 3 years ago

sass-scoped-media-query v2.0.1

Weekly downloads
374
License
MIT
Repository
github
Last release
3 years ago

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:

@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

License

MIT © Ivan Nikolić