1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
layout: default
permalink: docs/media.html
---
# @media
The `@media` queries work just as they do within regular CSS, but with Stylus's block notation:
@media print
#header
#footer
display none
Yielding:
@media print {
#header,
#footer {
display: none;
}
}
## Media Query Bubbling
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;
}
}
## Nested media queries
You can nest `@media`s one into another and they would combine into one:
@media (max-width: 500px)
.foo
color: #000
@media (min-width: 100px), (min-height: 200px)
.foo
color: #100
Would yield to
@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;
}
}
## Interpolations and variables
You can use both interpolations and variables inside media queries, so it is possible to do things like this:
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
color #fff
This would yield
@media (max-width: 30em) {
body {
color: #fff;
}
}
It is also possible to use expressions inside MQ:
.foo
for i in 1..4
@media (min-width: 2**(i+7)px)
width: 100px*i
would yield to
@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;
}
}
|
