Conditionally Conjoined Media Queries for Sass (just a proposal, and quite possibly a bad one)

_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; }
    }
}

Breakpoint and @Snugug's respond-to can handle the joining with 'and'. (They both use the Breakpoint engine.) I've updated my gist to show an example, starting at line 73. https://gist.github.com/3952907

I may be misunderstanding your intention with not (!retina), but that's also possible with breakpoint. Just with a different syntax. That syntax is interesting, but it's not possible with current Sass script. My example is on the other gist, on line 106.

There is one feature of css media queries that I know Breakpoint can't do yet, and that's chain together tests with OR, rather than AND. I don't see that expressed much in the wild tho. Still it would be nice to figure out a graceful way to incorporate that.