Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@mixin media-query($value, $operator: 'min-width', $query: 'screen') {
	@media #{$query} and (#{$operator}: #{$value}px) {
		@content;
	}
}

@mixin media-query-max($value, $operator: 'max-width', $query: 'screen') {
	@media #{$query} and (#{$operator}: #{$value}px) {
		@content;
	}
}

@mixin media-query-minmax($value-min, $value-max, $operator: 'min-width', $operator2: 'max-width', $query: 'screen') {
	@media #{$query} and (#{$operator}: #{$value-min}px) and (#{$operator2}: #{$value-max}px) {
		@content;
	}
}

.media320 {
    width: 200px;
    
	@include media-query(320) {
		width: 100px;
	}
}

.media320-max {
    width: 200px;
    
	@include media-query-max(960) {
		width: 100px;
	}
}

.media320-min-max {
    width: 200px;
    
	@include media-query-minmax(960, 1200) {
		width: 100px;
	}
}

SassMeister-output.css

.media320 {
  width: 200px;
}
@media screen and (min-width: 320px) {
  .media320 {
    width: 100px;
  }
}

.media320-max {
  width: 200px;
}
@media screen and (max-width: 960px) {
  .media320-max {
    width: 100px;
  }
}

.media320-min-max {
  width: 200px;
}
@media screen and (min-width: 960px) and (max-width: 1200px) {
  .media320-min-max {
    width: 100px;
  }
}