Sass media query @mixin example.

example.scss

$breakSmall: 320px;
$breakLarge: 1024px;

@mixin respondTo($media) {
	@if ($media == handhelds) {
		@media only screen and (max-width: $breakSmall) { @content; }
	}
	@else if ($media == medium-screens) {
		@media only screen and (min-width: $breakSmall + 1) and (max-width: $breakLarge - 1) { @content; }
	}
	@else if ($media == wide-screens) {
		@media only screen and (min-width: $breakLarge) { @content; }
	}
}

.profile-pic {
	float: left;
	width: 250px;
	@include respondTo(handhelds) { width: 100% ;}
	@include respondTo(medium-screens) { width: 125px; }
	@include respondTo(wide-screens) { float: none; }
}