Simple but versatile context mixin. Treat contextual styles holistically.

context.scss

// Context mixin
// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
// FOR: Creating contextual styles
//      Responsive breakpoints, @media contexts, and ascendant classes (like from Modernizr)
// WHY: Context is key and shouldn't be afterthought, code organization
// USE: context(300px){} context(print){}
// context(tablet-landscape){} context(touch){} context(ie7){}
@mixin context($values...) {
    @each $value in $values {
		$type: type_of($value);
		@if $type == number {
			@media (min-width: #{$value} ) { @content; }
		}
		@else if $value == print {
			@media print { @content; }
		}
		@else if $value == mobile {
			@media (min-width: 320px) { @content; }
		}
		@else if $value == mobile-landscape {
			@media (min-width: 480px) { @content; }
		}
		@else if $value == tablet {
			@media (min-width: 768px) { @content; }
		}
		@else if $value == tablet-landscape {
			@media (min-width: 1024px) { @content; }
		}
		@else if $value == desktop {
			@media (min-width: 1280px) { @content; }
		}
		@else if $value == desktop-large {
			@media (min-width: 1500px) { @content; }
		}
		@else if $type == string {
			.#{$value} & { @content; }
		}
	}
}

examples.scss

/*Pixel-specific @media query*/
#container {
    @include context(1000px) {
		display: none;
	}
}
 
/*Variable-based @media query (defaults in mixin)*/
#container {
	@include context(mobile) {
		display: none;
	}
}
 
/*Print @media query*/
#container {
	@include context(print) {
		display: none;
	}
}

/*within .touch*/
#container {
	@include context(touch) {
		display: none;
	}
}
 
/*320px breakpoint AND within .touch*/
#container {
	@include context(touch) {
		@include context(320px) {  
			display: none;
		}
	}
}
 
/*320px breakpoint OR within .touch*/
#container {
	@include context(touch, 320px) {  
		display: none;
	}
}

output.css

/*Pixel-specific @media query*/
@media (min-width: 1000px) {
  #container {
    display: none;
  }
}

/*Variable-based @media query (defaults in mixin)*/
@media (min-width: 320px) {
  #container {
    display: none;
  }
}

/*Print @media query*/
@media print {
  #container {
    display: none;
  }
}

/*within .touch*/
.touch #container {
  display: none;
}

/*320px breakpoint AND within .touch*/
@media (min-width: 320px) {
  .touch #container {
    display: none;
  }
}

/*320px breakpoint OR within .touch*/
.touch #container {
  display: none;
}
@media (min-width: 320px) {
  #container {
    display: none;
  }
}

separated.scss

// I personally like the simple syntax of using a single mixin
//But if the functions of the context mixin were separated into more specific functions
//It might look like this.
@mixin breakpoint($value) {
	$type: type_of($value);
	@if $type == number {
		@media (min-width: #{$value} ) { @content; }
	}
	@else if $value == mobile {
		@media (min-width: 320px) { @content; }
	}
	@else if $value == mobile-landscape {
		@media (min-width: 480px) { @content; }
	}
	@else if $value == tablet {
		@media (min-width: 768px) { @content; }
	}
	@else if $value == tablet-landscape {
		@media (min-width: 1024px) { @content; }
	}
	@else if $value == desktop {
		@media (min-width: 1280px) { @content; }
	}
	@else if $value == desktop-large {
		@media (min-width: 1500px) { @content; }
	}
}

@mixin print() {
    @media print { @content; }
}

@mixin within($value){
    .#{$value} & { @content; }
}