Sass-mixin для media query

• 10, 29, 2014
•  bullgare
•  HTML and CSS
• комментария 2

@mixin media($query) {
	@if $query {
		@media only screen and (#{$query}) { @content; }
	}
}

Использование:

html, body {
	width: 100%;

	@include media("max-width: 400px") {
		width: 400px;
		overflow-x: auto !important;
	}
}

Использование со встраиванием переменных:

html, body {
	$smallScreenWidth: 400px;
	
	width: 100%;

	@include media("max-width: #{$smallScreenWidth}") {
		width: $smallScreenWidth;
		overflow-x: auto !important;
	}
}