Media queries mixin for Stylus

media_queries.styl

/**
 * Thanks to Martin Laine
 * http://1pixelout.net/2015/10/02/simple-breakpoint-media-queries-with-stylus/
 **/

media_queries = {
  mobile  : "only screen and (max-width: 600px)",
  tablet  : "only screen and (min-width: 601px) and (max-width: 800px)",
  desktop : "only screen and (min-width: 801px)"
}

for_breakpoint(breakpoints)
  conditions = ()
  for breakpoint in breakpoints
    push(conditions, media_queries[breakpoint])
  conditions = join(", ", conditions)
  @media conditions
    {block}

usage.styl

// Usage:

.sidebar
  width 200px

  +for_breakpoint(mobile tablet)
    display none
    
// Compiles to:

.sidebar {
  width: 200px;
}

@media only screen and (max-width: 600px), only screen and (min-width: 601px) and (max-width: 800px) {
  .sidebar {
    display: none;
  }
}