1 | from(num)
|
2 | condition = 'screen and (min-width: %s)' % num
|
3 | @media condition
|
4 | {block}
|
5 |
|
6 | to(num)
|
7 | condition = 'screen and (max-width: %s)' % ((num - 1))
|
8 | @media condition
|
9 | {block}
|
10 |
|
11 |
|
12 | mobile()
|
13 | +to($UI.media.mobile)
|
14 | {block}
|
15 |
|
16 | tablet()
|
17 | +from($UI.media.tablet)
|
18 | {block}
|
19 |
|
20 | desktop()
|
21 | +from($UI.media.desktop)
|
22 | {block}
|
23 |
|
24 | wide()
|
25 | +from($UI.media.wide)
|
26 | {block}
|
27 |
|
28 | between(num1, num2)
|
29 | condition = 'screen and (min-width: %s) and (max-width: %s)' % (num1 (num2 - 1))
|
30 | @media condition
|
31 | {block}
|
32 |
|
33 | betweenHeight(num1, num2)
|
34 | condition = 'screen and (min-height: %s) and (max-height: %s)' % (num1 (num2 - 1))
|
35 | @media condition
|
36 | {block}
|
37 |
|
38 | portrait()
|
39 | @media (orientation: portrait)
|
40 | {block}
|
41 |
|
42 | landscape()
|
43 | @media (orientation: landscape)
|
44 | {block}
|
45 |
|
46 | web()
|
47 | if __WEB__ is defined
|
48 | {block}
|
49 |
|
50 | android()
|
51 | if __ANDROID__ is defined
|
52 | {block}
|
53 |
|
54 | ios()
|
55 | if __IOS__ is defined
|
56 | {block}
|
57 |
|
58 | windows()
|
59 | if __WINDOWS__ is defined
|
60 | {block}
|
61 |
|
62 | macos()
|
63 | if __MACOS__ is defined
|
64 | {block}
|
65 |
|
66 | native()
|
67 | unless __WEB__ is defined
|
68 | {block}
|
69 |
|
70 | bleed(left = 2u, right = left)
|
71 | padding-left left
|
72 | padding-right right
|
73 | margin-left (- left)
|
74 | margin-right (- right)
|
75 |
|
76 | radius(key = m)
|
77 | if key is m
|
78 | border-radius 4px
|
79 | else if key is circle
|
80 | border-radius 9999px
|