style.scss

@import "media-query/_media-query-config";

.test-class{
	width: 1500px;
	max-width: 100%;
	border: 1px solid red;
	@include for-media('container', &, (padding: 0 15px));
	@include for-media('sm', &, (width: 700px, border: 1px solid #333));
	
	@include add-custom-media('speech', 'speech and (aspect-ratio: 11/5)');
	@include add-custom-media('hover', '(hover: hover)');

	@include for-media-custom('speech', &, (background: blue));
	@include for-media-custom('hover', &, (background: black));

	@include print-custom-media-for('speech', false); /// setting preserve to false
}

#test-id{
	background: rgba(0,0,0,0.5);
	@include for-media('xs', &, (
		color: red,
		background-image: (url('image.jpg'), url('paint.svg')),
		background-position: (left top, center bottom)
	));

	@include for-media(-1200px, selector-nest(&, '.child-ele'), (background: #e9e9e9));
	@include for-media(-1200px, selector-unify(&, '.tight-bind'), (background: #e9e9e9));
}

@include for-media('sm', '.some-class', (text-align: center));

@include for-media(991px, '.some-class', (text-align: justify));

@include apply-media-css();

@include apply-media-custom-css();