BEM+mq.scss

@import "mq";

$mq-breakpoints: (
	xs:  320px,
	sm:  740px,
	md:  980px,
	lg:  1300px,
);

// ------------------------------
// Example
// ------------------------------

.block {

	&__element {
		color: navy;
		font-size: 15px;
		&--modifier {
			background-color: navy;
			color: #fff;
		}
	}

	// From
	@include mq($from: sm) {
		&__element {
			font-size: 20px;
		}
	}
	@include mq($from: md) {
		&__element {
			font-size: 25px;
		}
	}
	@include mq($from: lg) {
		&__element {
			font-size: 30px;
		}
	}

	// Until
	@include mq($until: sm) {}
	@include mq($until: md) {}
	@include mq($until: lg) {}

}

// Output
.block__element {
	color: navy;
	font-size: 15px;
}
.block__element--modifier {
	background-color: navy;
	color: #fff;
}
@media (min-width: 46.25em) {
	.block__element {
		font-size: 20px;
	}
}
@media (min-width: 61.25em) {
	.block__element {
		font-size: 25px;
	}
}
@media (min-width: 81.25em) {
	.block__element {
		font-size: 30px;
	}
}