title: How can you use multiple variable breakpoints for media queries in Stylus?
body: <h2>Current Situation</h2>
  
  <p>I have the following Stylus code</p>
  
  <pre><code>$mobile = '(max-width 767px)';
  $tablet = '(min-width 768px) and (max-width: 1365px)';
  $desktop = '(min-width: 1366px)';
  
    .sidebar
      width 300px;
  
      @media $tablet
        display none;
  </code></pre>
  
  <p>This code works well - the sidebar disappears for the listed screen-sizes.</p>
  
  <h2>The Problem</h2>
  
  <p>Now, I would like to also make it disappear for the <code>$mobile</code> breakpoint.</p>
  
  <p>Ideally, what I would want is something like this:</p>
  
  <pre><code>$mobile = '(max-width 767px)';
  $tablet = '(min-width 768px) and (max-width: 1365px)';
  $desktop = '(min-width: 1366px)';
  
    .sidebar
      width 300px;
  
      @media $tablet, $mobile
        display none;
  </code></pre>
  
  <p>And it would output (or something to the effect of)</p>
  
  <pre><code>.sidebar { width: 300px; }
  @media (min-width: 768px) and (max-width: 1365px), (max-width: 767px) {
    .sidebar { display: none; }
  </code></pre>
  
  <h2>What I've tried</h2>
  
  <ul>
  <li><code>@media $tablet, $mobile</code> results in Stylus outputting <code>@media $tablet, $mobile</code></li>
  <li><code>@media '{$tablet}, {$mobile}</code> results in a syntax error.</li>
  <li><code>@media join(',', $tablet, $mobile)</code> results in a syntax error.</li>
  </ul>
  
  <h3>What I can do but don't want to do</h3>
  
  <ul>
  <li>I can setup a new breakpoint <code>$mobileAndTablet</code> that defeats the purpose (I don't want to make all the combinations).</li>
  <li>I can make it <code>display: none</code> always and <code>display: block</code> on <code>$desktop</code> breakpoints, again, that's not what I'm looking for here (in this example I have 3 breakpoints, in others I may have more).</li>
  </ul>
  
  <h2>TL;DR</h2>
  
  <p>How can I make use of multiple variables for multiple breakpoints in Stylus? </p>
  
  <p>Sass has this feature with <code>@media #{$mobile}, #{$tablet}</code>. I'm looking for something similar for Stylus.</p>