Stylus@media
@media クエリは通常のCSS内と同じように機能しますが、Stylusのブロック記法を使用します
@media print
#header
#footer
display none
@media print
#header
#footer
display none
出力
@media print {
#header,
#footer {
display: none;
}
}
@media print {
#header,
#footer {
display: none;
}
}
メディアクエリのバブリング
メディアクエリもネストでき、使用されているコンテキストをラップするように展開されます。例えば
.widget
padding 10px
@media screen and (min-width: 600px)
padding 20px
.widget
padding 10px
@media screen and (min-width: 600px)
padding 20px
出力
.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を互いにネストすることができ、それらは1つに結合されます
@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
出力は
@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;
}
}
インターポレーションと変数
メディアクエリ内でインターポレーションと変数の両方を使用できるため、次のようなことが可能です
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
color #fff
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
color #fff
これは出力されます
@media (max-width: 30em) {
body {
color: #fff;
}
}
@media (max-width: 30em) {
body {
color: #fff;
}
}
MQ内で式を使用することも可能です
.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
出力は
@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;
}
}