multiple static media expressions, OR rule

[nirazul]

I've started to use susy for my grids and didn't want to drop include-media for breakpoint.
Turns out, it should be reasonably easy to make a mixin to use susy with your plugin (oddbird/susy#524).

What I stumbled over was a malfunctioning media rule when adding more than one static media expressions. Makes totally sense that it's not working since they exclude each other. It's still strange how they fail (3 min-width statements).
What I really wanted, was an OR rule.

First things first, the code:

im media-expressions:

$media-expressions: (
    // media types
    screen: 'screen',

    // width
    xs: '(max-width: #{$screen-xs-max})',
    sm: ('(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})'),
    md: ('(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})'),
    lg: '(min-width: #{$screen-lg-min})',

    // orientation
    portrait: '(orientation: portrait)',
    landscape: '(orientation: landscape)',

    // resolution
    res2x: '(min-resolution: 2dppx)',
    res3x: '(min-resolution: 3dppx)',
);

my code:

@include media('sm', 'md', 'lg') {
    .grid {
        < grid styling.. >
    }
}

output

@media (min-width: 768px) and (min-width: 992px) and (min-width: 1200px) {
    .grid {
        < grid styling.. >
    }
}

what i really want

@media (min-width:768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px), (min-width: 1200px) {
    .grid {
        < grid styling.. >
    }
}

I know that it is far more feasible to just use breakpoints and do something like @include media('>xs'). But sometimes it's just convenient to combine media expressions with an OR rule. Especially when they're not min-width, max-width related. Is there a way to do that?

[KittyGiraudel]

I am doing shit with GitHub this morning. My apologies. I'll let @eduardoboucas have a look. :)

[eduardoboucas]

A lot of people seem to be interested in this (#104 and #132), but it's not something we currently support.

I appreciate something like this would be useful and I'm open to the discussion, but I can't think of a syntax that would be both meaningful and simple to use.

Any ideas?

[nirazul]

For me the most readable (but unfortunately most breaking-changey) would be:

@include media('xs' 'retina2x', 'some-other-expr' 'height>small') {
    ...
}

So you'd have , for OR and for AND. This would be sort of in line with css properties. Commas separate lists of same expressions. Spaces separate items of a list that belong together.

div {
    border: 2px solid red, 1px dashed purple;
}

[robsonsobral]

I'm sorry for jump into the discussion, but... Why not | for OR? Split the list of breaking points by | and them by ,.

[KittyGiraudel]

We’ll likely use or or || rather than |. | is a bitwise operator.

[robsonsobral]

My vote is on or, boss!

[eduardoboucas]

Closing this. See #144 and include-media-or.