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ć