1// For now, variables can't be declared inside @media blocks.
2
3@var: 42;
4
5@media print {
6    .class {
7        color: blue;
8        .sub {
9            width: @var;
10        }
11    }
12    .top, header > h1 {
13        color: (#222 * 2);
14    }
15}
16
17@media screen {
18    @base: 8;
19    body { max-width: (@base * 60); }
20}
21
22@ratio_large: 16;
23@ratio_small: 9;
24
25@media all and (device-aspect-ratio: @ratio_large / @ratio_small) {
26   body { max-width: 800px; }
27}
28
29@media all and (orientation:portrait) {
30    aside { float: none; }
31}
32
33@media handheld and (min-width: @var), screen and (min-width: 20em) {
34    body {
35        max-width: 480px;
36    }
37}
38
39body {
40    @media print {
41        padding: 20px;
42
43        header {
44            background-color: red;
45        }
46
47        @media (orientation:landscape) {
48            margin-left: 20px;
49        }
50    }
51}
52
53@media screen {
54  .sidebar {
55    width: 300px;
56    @media (orientation: landscape) {
57      width: 500px;
58    }
59  }
60}
61
62@media a {
63  .first {
64    @media b {
65      .second {
66        .third {
67          width: 300px;
68          @media c {
69            width: 500px;
70          }
71        }
72        .fourth {
73          width: 3;
74        }
75      }
76    }
77  }
78}
79
80body {
81    @media a, b and c {
82        width: 95%;
83
84        @media x, y {
85            width: 100%;
86        }
87    }
88}
89
90.mediaMixin(@fallback: 200px) {
91    background: black;
92
93    @media handheld {
94        background: white;
95
96        @media (max-width: @fallback) {
97            background: red;
98        }
99    }
100}
101
102.a {
103  .mediaMixin(100px);
104}
105
106.b {
107  .mediaMixin();
108}
109@smartphone: ~"only screen and (max-width: 200px)";
110@media @smartphone {
111  body {
112    width: 480px;
113  }
114}
115
116@media print {
117  @page :left {
118    margin: 0.5cm;
119  }
120  @page :right {
121    margin: 0.5cm;
122  }
123  @page Test:first {
124    margin: 1cm;
125  }
126  @page :first {
127    size: 8.5in 11in;
128    @top-left {
129      margin: 1cm;
130    }
131    @top-left-corner {
132      margin: 1cm;
133    }
134    @top-center {
135      margin: 1cm;
136    }
137    @top-right {
138      margin: 1cm;
139    }
140    @top-right-corner {
141      margin: 1cm;
142    }
143    @bottom-left {
144      margin: 1cm;
145    }
146    @bottom-left-corner {
147      margin: 1cm;
148    }
149    @bottom-center {
150      margin: 1cm;
151    }
152    @bottom-right {
153      margin: 1cm;
154    }
155    @bottom-right-corner {
156      margin: 1cm;
157    }
158    @left-top {
159      margin: 1cm;
160    }
161    @left-middle {
162      margin: 1cm;
163    }
164    @left-bottom {
165      margin: 1cm;
166    }
167    @right-top {
168      margin: 1cm;
169    }
170    @right-middle {
171      content: "Page " counter(page);
172    }
173    @right-bottom {
174      margin: 1cm;
175    }
176  }
177}
178
179@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
180  .b {
181    background: red;
182  }
183}
184
185.bg() {
186    background: red;
187
188    @media (max-width: 500px) {
189        background: green;
190    }
191}
192
193body {
194    .bg();
195}
196
197@bpMedium: 1000px;
198@media (max-width: @bpMedium) {
199    body {
200        .bg();
201        background: blue;
202    }
203}
204
205@media (max-width: 1200px) {
206  /* a comment */
207
208  @media (max-width: 900px) {
209    body { font-size: 11px; }
210  }
211}
212
213.nav-justified {
214  @media (min-width: 480px) {
215    > li {
216      display: table-cell;
217    }
218  }
219}
220
221.menu
222{
223  @media (min-width: 768px) {
224    .nav-justified();
225  }
226}
227@all: ~"all";
228@tv: ~"tv";
229@media @all and @tv {
230  .all-and-tv-variables {
231    var: all-and-tv;
232  }
233}
234~~~~~~~~~~
235