How can you use multiple variable breakpoints for media queries in Stylus?

Question

Current Situation

I have the following Stylus code

$mobile = '(max-width 767px)';
$tablet = '(min-width 768px) and (max-width: 1365px)';
$desktop = '(min-width: 1366px)';

  .sidebar
    width 300px;

    @media $tablet
      display none;

This code works well - the sidebar disappears for the listed screen-sizes.

The Problem

Now, I would like to also make it disappear for the $mobile breakpoint.

Ideally, what I would want is something like this:

$mobile = '(max-width 767px)';
$tablet = '(min-width 768px) and (max-width: 1365px)';
$desktop = '(min-width: 1366px)';

  .sidebar
    width 300px;

    @media $tablet, $mobile
      display none;

And it would output (or something to the effect of)

.sidebar { width: 300px; }
@media (min-width: 768px) and (max-width: 1365px), (max-width: 767px) {
  .sidebar { display: none; }

What I've tried

• @media $tablet, $mobile results in Stylus outputting @media $tablet, $mobile
• @media '{$tablet}, {$mobile} results in a syntax error.
• @media join(',', $tablet, $mobile) results in a syntax error.

What I can do but don't want to do

• I can setup a new breakpoint $mobileAndTablet that defeats the purpose (I don't want to make all the combinations).
• I can make it display: none always and display: block on $desktop breakpoints, again, that's not what I'm looking for here (in this example I have 3 breakpoints, in others I may have more).

TL;DR

How can I make use of multiple variables for multiple breakpoints in Stylus?

Sass has this feature with @media #{$mobile}, #{$tablet}. I'm looking for something similar for Stylus.

Answer 1

you will have to lose the parenthesis since stylus forces media queries into parenthesis for inline concatenation (stylus is no longer under active development, so this will probably not be solved) for this to work inline, or you can just do regular concatenation into a new variable and then use that. Here is a playground

$mobile = 'max-width: 767px'
$laptop = 'min-width: 1366px'

@media ({$mobile}) , ({$laptop})
  body
    color: green;

Answer 2

Probably not the best solution but you can consider the use of for to achieve this by writing a code like below:

$mobile = '(max-width 767px)';
$tablet = '(min-width 768px) and (max-width: 1365px)';
$desktop ='(min-width: 1366px)'; 

  .sidebar
    width 300px;

    for m in $mobile $tablet
      @media m
        display none;  

And you will have this output:

.sidebar {
    width: 300px;
}

@media (max-width: 767px) {
    .sidebar {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    .sidebar {
        display: none;
    }
}

The stylus code is somehow like you want but the output will not be a single media query.

UPDATE

Here is another hacky way to avoid the media query duplication but you will have to duplicate the selector:

$mobile = '(max-width: 767px)';
$tablet = '(min-width: 768px) and (max-width: 1365px)';
$desktop ='(min-width: 1366px)';

  .sidebar
    width 300px;

  unquote("@media " + join(',',$mobile $tablet) + "{")
  .sidebar
    display none;   
  unquote("}")

The above will produce this:

.sidebar {
    width: 300px;
}

@media (max-width: 767px),(min-width: 768px) and (max-width: 1365px) {
    .sidebar {
        display: none;
    }
}

Answer 3

You can use the join() function to generate the required literal beforehand:

$media = join(',', $tablet $mobile);

Then use it:

@media $media
    display: none;