Mixin for media query on stylus?

Question

css

Hello.
Advise how convenient it is to write media query on stylus. Something like this for scss:

// breakpoints
   
$S:     480px; 
$M:     768px;
$ML:    960px;     
$L:     1170px;     
$XL:     1440px;   

// media queries

@mixin MQ($canvas) {
  @if $canvas == S {
   @media only screen and (min-width: $S) { @content; } 
  }
  @else if $canvas == M {
   @media only screen and (min-width: $M) { @content; } 
  }
  @else if $canvas == ML {
   @media only screen and (min-width: $ML) { @content; } 
  }
  @else if $canvas == L {
   @media only screen and (min-width: $L) { @content; } 
  }
  @else if $canvas == XL {
   @media only screen and (min-width: $XL) { @content; } 
  }
}

Answer 1

Query mixin grid stylus
first link davidwalsh.name/stylus-grid

Answer 2

I am amazed at people who first go to the forum, and then, not finding an answer, climb into Google.
Media query stylus , first link is https://learnboost.github.io/stylus/docs/media.html

Answer 3

https://github.com/jescalan/rupture