The @media works just as it does within regular CSS, but with Stylus's block notation:
@media print
#header
#footer
display none
Yielding:
@media print {
#header,
#footer {
display: none;
}
}
Media queries can be nested, too, and they will be expanded to wrap the context in which they are used. For example:
.widget
padding 10px
@media screen and (min-width: 600px)
padding 20px
Yielding:
.widget {
padding: 10px;
}
@media screen and (min-width: 600px) {
.widget {
padding: 20px;
}
}