eduardoboucas / include-media

📐 Simple, elegant and maintainable media queries in Sass

Home Page:https://eduardoboucas.github.io/include-media/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is it possible to use the "not" operator on include-media?

JoaoPLC opened this issue · comments

I'm trying to isolate code for a certain size with landscape, and apply another media query with the opposite, in which the not operator would come very in handy, but I don't see any documentation pertaining to it.

Example:
@include media('not', '<md', 'landscape') {

}

@include media('<md', 'landscape') {

}

Is there any way to do it?

@JoaoPLC the closest thing to opposite of landscape would be portrait i guess and opposite less then would be greater than and equal too. so >=
you could write a small sass function that could take these values and flip them if you needed to.

@include media(not('<md', 'landscape'))

but why not just write. @include media('>=md', 'portrait')

Or if its always landscape then you can next them.

@include media('landscape') {
    @include media('<md',) {}
    @include media('>=md') {}
}

That's the kind of nesting I wanted to avoid, and a simple "not" operator would solve it quite elegantly.

Also, I want to apply it to both landscape and portrait, on >=md, and only on portrait on <md, that would force me to duplicate code.

I would just use a @mixin then to avoid duplication in that case. Or have a crack at wrapping it in a sass function to flip the cases.

As @jackmcpickle explained, this is something you should feel free to experiment with but that is unlikely we will add this into the core library. I’m therefore closing. :)