Need to combine different mixins

[Nikita Seleckis]

E.g. I have the same style for lanscape and portrait orientation, but from different screen width:

.block
    +portrait()
        +above(768px)
            position absolute
            top 0
            left 0
            right 0
            bottom 0
    +landscape()
        +above(960px)
            position absolute
            top 0
            left 0
            right 0
            bottom 0

Now I have to duplicate the code. Would be great to combine them to get something like:

@media screen and (orientation: portrait) and (min-width: 768px), screen and (orientation: landscape) and (min-width: 960px) {
    .block {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

[Jeff Escalante]

I'm not sure that this is possible without a modification to stylus core, which is not really possible for me at the moment. Sorry!

[Nikita Seleckis]

Take a look please:

above($args)
    $media = ""
    $comma = ""
    for $orient, $bp in $args
        $media += $comma + "(min-width: " + $bp + ") and (orientation: " + $orient + ")"
        $comma = ", "
    $media = unquote($media)

    @media $media
        {block}

body
    +above({ portrait: 768px, landscape: 1024px })
        font-size: 18px

produces:

@media (min-width: 768px) and (orientation: portrait), (min-width: 1024px) and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

So, it is possible without stylus core modification.

[Jeff Escalante]

Ok, would you be willing to submit a PR to add this functionality?

[Nikita Seleckis]

I tried to understand you code, but still no luck. Maybe later.