eduardoboucas / include-media

📐 Simple, elegant and maintainable media queries in Sass
https://eduardoboucas.github.io/include-media/
MIT License
2.57k stars 191 forks source link

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

Closed JoaoPLC closed 4 years ago

JoaoPLC commented 4 years ago

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?

jackmcpickle commented 4 years ago

@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') {}
}
JoaoPLC commented 4 years ago

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.

jackmcpickle commented 4 years ago

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.

KittyGiraudel commented 4 years ago

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. :)