Stylus@media
@media 查询的工作方式与常规 CSS 中的一样，但使用 Stylus 的块符号：
stylus
@media print
#header
#footer
display none
@media print
#header
#footer
display none
生成：
css
@media print {
#header,
#footer {
display: none;
}
}
@media print {
#header,
#footer {
display: none;
}
}
媒体查询冒泡
媒体查询也可以嵌套，它们将被扩展以包裹使用它们的上下文。例如：
stylus
.widget
padding 10px
@media screen and (min-width: 600px)
padding 20px
.widget
padding 10px
@media screen and (min-width: 600px)
padding 20px
生成：
css
.widget {
padding: 10px;
}
@media screen and (min-width: 600px) {
.widget {
padding: 20px;
}
}
.widget {
padding: 10px;
}
@media screen and (min-width: 600px) {
.widget {
padding: 20px;
}
}
嵌套媒体查询
你可以将 @media 嵌套在另一个中，它们将组合成一个：
stylus
@media (max-width: 500px)
.foo
color: #000
@media (min-width: 100px), (min-height: 200px)
.foo
color: #100
@media (max-width: 500px)
.foo
color: #000
@media (min-width: 100px), (min-height: 200px)
.foo
color: #100
将生成：
css
@media (max-width: 500px) {
.foo {
color: #000;
}
}
@media (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) {
.foo {
color: #100;
}
}
@media (max-width: 500px) {
.foo {
color: #000;
}
}
@media (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) {
.foo {
color: #100;
}
}
插值和变量
你可以在媒体查询中同时使用插值和变量，因此可以做这样的事情：
stylus
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
color #fff
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
color #fff
这将生成：
stylus
@media (max-width: 30em) {
body {
color: #fff;
}
}
@media (max-width: 30em) {
body {
color: #fff;
}
}
还可以在媒体查询中使用表达式：
stylus
.foo
for i in 1..4
@media (min-width: 2**(i+7)px)
width: 100px*i
.foo
for i in 1..4
@media (min-width: 2**(i+7)px)
width: 100px*i
将生成：
css
@media (min-width: 256px) {
.foo {
width: 100px;
}
}
@media (min-width: 512px) {
.foo {
width: 200px;
}
}
@media (min-width: 1024px) {
.foo {
width: 300px;
}
}
@media (min-width: 2048px) {
.foo {
width: 400px;
}
}
@media (min-width: 256px) {
.foo {
width: 100px;
}
}
@media (min-width: 512px) {
.foo {
width: 200px;
}
}
@media (min-width: 1024px) {
.foo {
width: 300px;
}
}
@media (min-width: 2048px) {
.foo {
width: 400px;
}
}