kerns/_respond-to-ccmq.md

## _respond-to-ccmq.md

      
    Raw
  

              _respond-to-ccmq.md
            
          
    Conditionally Conjoined Media Queries (just a proposal, and quite possibly a bad one)

Sass 3.2 makes working with media queries a lot easier, mostly by clearing the way for mix-ins going by the name of "breakpoint" or "respond-to".
The basic pattern of defining queries and assigning them aliases that can be passed with includes that trigger full-blown rules is great, but it would also be nice if we could select/combine and otherwise extend control over these disparate rules with a little more flexibility.
Using the example respond-to below, I would love it if @include respond-to(large-screen && retina) would have the same effect as nesting these individual respond-to()'s within each other, and the rule(s) contained within would be applied when both queries matched (the screen is both large and retina).
The ability to conjoin a min and max width range of individual queries with something like respond-to(small-screen || medium-screen) would also be welcome. Or maybe even more useful, the ability to exclude a single query with something like respond-to(!mobile) ...which could generate a staggering amount of css, at the same time streamlining and simplifying the scss behind it.
But questions remain, is this a good idea, or even possible...or possibly possible in a future release of Sass. So many questions.

  
## _respond-to.scss
$break-small: 320px;
$break-medium: 580px;
$break-large: 1234px;

@mixin respond-to($media) {
    @if $media == mobile {
        @media only screen and (max-width: $break-small) { @content; }
    }
    @else if $media == small-screen {
        @media only screen and (min-width: $break-small + 1) and (max-width: $break-medium - 1) { @content; }
    }
    @else if $media == medium-screen {
        @media only screen and (min-width: $break-medium + 1) and (max-width: $break-large - 1) { @content; }
    }
    @else if $media == large-screen {
        @media only screen and (min-width: $break-large) { @content; }
    }
    @else if $media == retina {
        @media only screen and (-webkit-min-device-pixel-ratio: 2) { @content; }
    }
}
	$break-small: 320px;
	$break-medium: 580px;
	$break-large: 1234px;

	@mixin respond-to($media) {
	@if $media == mobile {
	@media only screen and (max-width: $break-small) { @content; }
	}
	@else if $media == small-screen {
	@media only screen and (min-width: $break-small + 1) and (max-width: $break-medium - 1) { @content; }
	}
	@else if $media == medium-screen {
	@media only screen and (min-width: $break-medium + 1) and (max-width: $break-large - 1) { @content; }
	}
	@else if $media == large-screen {
	@media only screen and (min-width: $break-large) { @content; }
	}
	@else if $media == retina {
	@media only screen and (-webkit-min-device-pixel-ratio: 2) { @content; }
	}
	}